Vue3中如何自定義Hooks

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

Composition Api解耦Vue2 Option Api實現低耦合高內聚

說明：如果是Composition Api在功能復雜、代碼量巨大的組件下，我們配合自定義Hook，將代碼按功能分塊寫，變量和方法在一起定義和調用，比如A功能下集成了響應式變量和方法，我們后期維護只需要改動A功能模塊下的代碼，不會像Vue2在Option Api需要同時關注邏輯分散的methos和data。

所以自定義Hook的寫Vue3必須掌握的！它無不體現Vue3 Composition Api 低耦合高內聚的思想！ 筆者在看了官方文檔和開源的admin模板都是大量使用自定義Hooks的！

定義一下Vue3的自定義Hook：

雖然官方沒有明確指明或定義什么是自定義Hooks，但是卻無處不在用；

以函數形式抽離一些可復用的方法像鉤子一樣掛著，隨時可以引入和調用，實現高內聚低耦合的目標；

• 將可復用功能抽離為外部JS文件

• 函數名/文件名以use開頭，形如：useXX

• 引用時將響應式變量或者方法顯式解構暴露出來如：const {nameRef，Fn} = useXX()

• （在setup函數解構出自定義hooks的變量和方法）

實例：

簡單的加減法計算，將加法和減法抽離為2個自定義Hooks，并且相互傳遞響應式數據

• 加法功能-Hook

import { ref, watch } from 'vue';
const useAdd= ({ num1, num2 })  =>{
    const addNum = ref(0)
    watch([num1, num2], ([num1, num2]) => {
        addFn(num1, num2)
    })
    const addFn = (num1, num2) => {
        addNum.value = num1 + num2
    }
    return {
        addNum,
        addFn
    }
}
export default useAdd

• 減法功能-Hook

//減法功能-Hook
import { ref, watch } from 'vue';
export function useSub  ({ num1, num2 }){
    const subNum = ref(0)
    watch([num1, num2], ([num1, num2]) => {
        subFn(num1, num2)
    })
    const subFn = (num1, num2) => {
        subNum.value = num1 - num2
    }
    return {
        subNum,
        subFn
    }
}

• 加減法計算組件

<template>
    <div>
        num1:<input v-model.number="num1"  />
        <br />
        num2:<input v-model.number="num2"  />
    </div>
    <span>加法等于:{{ addNum }}</span>
    <br />
    <span>減法等于:{{ subNum }}</span>
</template>

<script setup>
import { ref } from 'vue'
import useAdd from './useAdd.js'     //引入自動hook 
import { useSub } from './useSub.js' //引入自動hook 

const num1 = ref(2)
const num2 = ref(1)
//加法功能-自定義Hook（將響應式變量或者方法形式暴露出來）
const { addNum, addFn } = useAdd({ num1, num2 })
addFn(num1.value, num2.value)
//減法功能-自定義Hook (將響應式變量或者方法形式暴露出來)
const { subNum, subFn } = useSub({ num1, num2 })
subFn(num1.value, num2.value)
</script>

Vue3自定義Hooks和Vue2時代Mixin關系：

Mixin不足

在 Vue 2 中，mixin 是將部分組件邏輯抽象成可重用塊的主要工具。但是，他們有幾個問題：

1、Mixin 很容易發生沖突：因為每個 mixin 的 property 都被合并到同一個組件中，所以為了避免 property 名沖突，你仍然需要了解其他每個特性。

2、可重用性是有限的：我們不能向 mixin 傳遞任何參數來改變它的邏輯，這降低了它們在抽象邏輯方面的靈活性。

上面這段是Vue3官方文檔的內容，可以概括和補充為：

1、Mixin難以追溯的方法與屬性

Vue3自定義Hooks卻可以

Vue3自定義Hooks, 引用時將響應式變量或者方法顯式暴露出來如：

const {nameRef，Fn} = useXX()

Mixins

export default {
  mixins: [ a, b, c, d, e, f, g ], //一個組件內可以混入各種功能的Mixin
  mounted() {
    console.log(this.name)  //問題來了，這個name是來自于哪個mixin？
  }
}

Mixin不明的混淆，我們根本無法獲知屬性來自于哪個Mixin文件，給后期維護帶來困難

Vue3自定義Hooks

//加法功能-自定義Hook（將響應式變量或者方法形式暴露出來）
const { addNum, addFn } = useAdd({ num1, num2 })
addFn(num1.value, num2.value)
//減法功能-自定義Hook (將響應式變量或者方法形式暴露出來)
const { subNum, subFn } = useSub({ num1, num2 })
subFn(num1.value, num2.value)

我們很容易看出每個Hooks顯式暴露出來的響應式變量和方法

2、無法向Mixin傳遞參數來改變邏輯

但是Vue3自定義Hooks卻可以：

Vue3自定義Hooks可以靈活傳遞任何參數來改變它的邏輯，參數不限于其他hook的暴露出來的變量

Mixins

export default {
  mixins: [ addMixin, subMixin], //組件內混入加法和減法Mixin
  mounted(){
      this.add(num1,num2) //調用addMixin內部的add方法
      this.sub(num1,num2) //調用subMixin內部的sub方法
  }  
}

可以通過調用Mixin內部方法來傳遞參數，卻無法直接給Mixin傳遞參數，因為Mixin不是函數形式暴露的，不發傳參

Vue3自定義Hook

在上面實例基礎上添加個算平均的Hook

//平均功能-Hook
import { ref, watch } from "vue";
export function useAverage(addNum) {
  const averageNum = ref(0);
  watch(addNum, (addNum) => {
    averageFn(addNum);
  });
  const averageFn = (addNum) => {
    averageNum.value = addNum / 2;
  };
  return {
    averageNum,
    averageFn,
  };
}

組件內

//組件內
//加法功能-自定義Hook（將響應式變量或者方法形式暴露出來）
const { addNum, addFn } = useAdd({ num1, num2 })
addFn(num1.value, num2.value)//主動調用，返回最新addNum
//平均功能-自定義Hook- hook傳入參數值來其他hook暴露出來的變量
const { averageNum, averageFn} = useAverage(addNum)
averageFn(addNum.value)

Vue3自定義Hooks可以靈活傳遞任何參數來改變它的邏輯，參數不限于其他hook的暴露出來的變量，這提高了Vue3在抽象邏輯方面的靈活性。

3、Mixin同名變量會被覆蓋

Vue3自定義Hook可以在引入的時候對同名變量重命名

Mixins

export default {
  mixins: [ addMixin, subMixin], //組件內混入加法和減法Mixin
  mounted(){
      this.add(num1,num2) //調用加法addMixin內部的add方法
      this.sub(num1,num2) //調用減法subMixin內部的sub方法
  }  
}

如果this.add(num1,num2)和 this.sub(num1,num2) 計算的結果返回的同名變量totalNum，由于JS單線程，后面引入的會覆蓋前面的，totalNum最終是減法sub的值

Vue3自定義Hooks

//加法功能-自定義Hook（將響應式變量或者方法形式暴露出來）
const { totalNum:addNum, addFn } = useAdd({ num1, num2 })
addFn(num1.value, num2.value)
//減法功能-自定義Hook (將響應式變量或者方法形式暴露出來)
const { totalNum:subNum, subFn } = useSub({ num1, num2 })
subFn(num1.value, num2.value)

在Vue3自定義Hooks中，雖然加法和減法Hooks都返回了totalNum，但是利用ES6對象解構很輕松給變量重命名

“Vue3中如何自定義Hooks”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！