本篇內(nèi)容介紹了“Vue3項(xiàng)目中的hooks怎么使用”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

濟(jì)水街道網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián),濟(jì)水街道網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為濟(jì)水街道1000+提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設(shè)要多少錢(qián)，請(qǐng)找那個(gè)售后服務(wù)好的濟(jì)水街道做網(wǎng)站的公司定做！

hooks 特點(diǎn)

vue3 中的 hooks 函數(shù)相當(dāng)于 vue2 里面的 mixin 混入，不同在于 hooks 是函數(shù)。

vue3 中的 hooks 函數(shù)可以提高代碼的復(fù)用性，能夠在不同的組件當(dāng)中都利用 hooks 函數(shù)。

hooks 函數(shù)可以與 mixin 連用，但是不建議。

hooks 基本使用

首先我們不管 hooks 哈，我們先寫(xiě)一個(gè)小功能，就是獲取頁(yè)面的寬高值，這個(gè)是講解 hooks 的常用案例了，都是老演員了，我們也來(lái)整一個(gè)。

我不啰嗦了，直接寫(xiě)代碼吧。

<template>
  <h5>hooks</h5>

  <p>頁(yè)面寬度: {{screen.width}}</p>
  <p>頁(yè)面高度: {{screen.height}}</p>

  <el-button @click="getWH">獲取頁(yè)面的寬高</el-button>
</template>
<script setup>
  import { reactive } from 'vue'

  const screen = reactive({
    width: 0,
    height: 0
  })

  const getWH = () => {
    screen.width = document.documentElement.clientWidth
    screen.height = document.documentElement.clientHeight
  }

</script>
<style scoped>

</style>

上面的代碼其實(shí)很簡(jiǎn)單了就，有兩個(gè)標(biāo)簽，顯示可視頁(yè)面的長(zhǎng)度和寬度，然后有一個(gè)按鈕獲取最新的長(zhǎng)寬進(jìn)行顯示。

這個(gè)功能是可以順利實(shí)現(xiàn)的哈。如果我們需要在另一個(gè)頁(yè)面也想實(shí)現(xiàn)這個(gè)功能的話(huà)，也很簡(jiǎn)單，在直接把上面的代碼復(fù)制一下到另一個(gè)需要實(shí)現(xiàn)的頁(yè)面就可以了。

但是

有沒(méi)有發(fā)現(xiàn)一個(gè)問(wèn)題，就是一個(gè)頁(yè)面需要就復(fù)制一遍，一個(gè)頁(yè)面需要就復(fù)制一遍，如果有一百個(gè)頁(yè)面就復(fù)制一百遍，代碼一兩行還好，如果是一個(gè)超級(jí)龐大的工具類(lèi)，那么在像這樣實(shí)現(xiàn)的話(huà)，是不是就過(guò)于復(fù)雜了，而且還不好實(shí)現(xiàn)，那這個(gè)問(wèn)題怎么解決呢？啊哈哈哈哈，沒(méi)錯(cuò)了寶子們，就是 hooks 。

我們針對(duì)上面的案例，我們使用 hooks 簡(jiǎn)單的實(shí)現(xiàn)一下。

首先，我們?cè)?src 文件夾下創(chuàng)建一個(gè) hooks 文件夾。

在 hooks 文件夾下創(chuàng)建一個(gè)文件，名字就叫做 useScreenWh.js 文件

接下來(lái)就很簡(jiǎn)單了，我們把獲取可視化界面的代碼放進(jìn)這個(gè) js 文件，然后導(dǎo)出去，給其他頁(yè)面使用就可以了。

import { reactive } from 'vue'

export default function () {  // 導(dǎo)出一個(gè)默認(rèn)方法

  // 創(chuàng)建一個(gè)對(duì)象，保存寬度和高度值
  const screen = reactive({
    width: 0,
    height: 0
  })

  // 創(chuàng)建一個(gè)方法，獲取可視化界面的寬度和高度值
  const getWH = () => {
    screen.width = document.documentElement.clientWidth
    screen.height = document.documentElement.clientHeight
  }

  return { screen, getWH }  // 方法返回寬高值
}

然后在需要使用 hooks 的文件引入就可以使用了。

<template>
  <h5>hooks</h5>

  <p>頁(yè)面寬度: {{screen.width}}</p>
  <p>頁(yè)面高度: {{screen.height}}</p>

  <el-button @click="getWH">獲取頁(yè)面的寬高</el-button>

</template>
<script setup lang="ts">

  // 導(dǎo)入 hooks 
  import screenWH from '../hooks/useScreenWh.js'

  // 因?yàn)?nbsp;screenWH 是一個(gè)導(dǎo)出的方法，所以需要調(diào)用一下子，然后順便解構(gòu)一下就可以在模板使用了。
  let { screen, getWH } = screenWH()

</script>
<style scoped>

</style>

好了，我們保存看一下效果。

“Vue3項(xiàng)目中的hooks怎么使用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

網(wǎng)站欄目：Vue3項(xiàng)目中的hooks怎么使用
當(dāng)前網(wǎng)址：http://www.chinadenli.net/article48/gpdphp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶(hù)體驗(yàn)、網(wǎng)站內(nèi)鏈、網(wǎng)站制作、品牌網(wǎng)站設(shè)計(jì)、App開(kāi)發(fā)、網(wǎng)站導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)