Vue3項目中的hooks的使用教程

Posted on by

今天我們稍微說一下 vue3 項目中的 hooks 的使用，其實這個 hooks 呢是和 vue2 當中的 mixin 是類似的，學習過 vue2 的小夥伴一定對 mixin 一定比較熟悉，就算沒用過也一定瞭解過，也就是混入，通過 mixin 混入來分發 vue 組件中的可復用功能。一個混入對象可以包含任意組件選項。當組件使用混入對象時，所有混入對象的選項將被“混合”進入該組件本身的選項。而 vue2 的 hooks 函數與 mixin 混入的區別，主要是 hooks 是函數。

hooks 特點

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

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

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

hooks 基本使用

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

我不囉嗦瞭，直接寫代碼吧。

<template>
  <h3>hooks</h3>

  <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>

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

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

但是

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

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

首先，我們在 src 文件夾下創建一個 hooks 文件夾。

在 hooks 文件夾下創建一個文件，名字就叫做 useScreenWh.js 文件

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

import { reactive } from 'vue'

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

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

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

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

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

<template>
  <h3>hooks</h3>

  <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的使用教程的文章就介紹到這瞭,更多相關Vue3 hooks內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：