本篇內容介紹了“Vue3項目中的hooks怎么使用”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

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

hooks 特點

vue3 中的 hooks 函數相當于 vue2 里面的 mixin 混入，不同在于 hooks 是函數。

vue3 中的 hooks 函數可以提高代碼的復用性，能夠在不同的組件當中都利用 hooks 函數。

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

hooks 基本使用

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

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

<template>
  <h5>hooks</h5>

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

  <el-button @click="getWH">獲取頁面的寬高</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>

上面的代碼其實很簡單了就，有兩個標簽，顯示可視頁面的長度和寬度，然后有一個按鈕獲取最新的長寬進行顯示。

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

但是

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

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

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

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

接下來就很簡單了，我們把獲取可視化界面的代碼放進這個 js 文件，然后導出去，給其他頁面使用就可以了。

import { reactive } from 'vue'

export default function () {  // 導出一個默認方法

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

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

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

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

<template>
  <h5>hooks</h5>

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

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

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

  // 導入 hooks 
  import screenWH from '../hooks/useScreenWh.js'

  // 因為 screenWH 是一個導出的方法，所以需要調用一下子，然后順便解構一下就可以在模板使用了。
  let { screen, getWH } = screenWH()

</script>
<style scoped>

</style>

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

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

網站欄目：Vue3項目中的hooks怎么使用
當前網址：http://chinadenli.net/article48/gpdphp.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供用戶體驗、網站內鏈、網站制作、品牌網站設計、App開發(fā)、網站導航

廣告

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