本篇內(nèi)容介紹了“Vue3項(xiàng)目中的hooks怎么使用”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(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è)要多少錢，請(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 哈，我們先寫一個(gè)小功能，就是獲取頁(yè)面的寬高值，這個(gè)是講解 hooks 的常用案例了，都是老演員了，我們也來整一個(gè)。

我不啰嗦了，直接寫代碼吧。

  import { reactive } from 'vue'

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

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

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

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

但是

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

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

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

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

接下來就很簡(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 的文件引入就可以使用了。

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

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

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

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