Vue3中怎么自定義Hooks

本文小編為大家詳細介紹“Vue3中怎么自定義Hooks”，內(nèi)容詳細，步驟清晰，細節(jié)處理妥當，希望這篇“Vue3中怎么自定義Hooks”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

Composition Api解耦Vue2 Option Api實現(xiàn)低耦合高內(nèi)聚

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

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

定義一下Vue3的自定義Hook：

雖然官方?jīng)]有明確指明或定義什么是自定義Hooks，但是卻無處不在用；

以函數(shù)形式抽離一些可復用的方法像鉤子一樣掛著，隨時可以引入和調(diào)用，實現(xiàn)高內(nèi)聚低耦合的目標；

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

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

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

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

實例：

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

• 加法功能-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 很容易發(fā)生沖突：因為每個 mixin 的 property 都被合并到同一個組件中，所以為了避免 property 名沖突，你仍然需要了解其他每個特性。

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

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

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

Vue3自定義Hooks卻可以

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

const {nameRef，F(xiàn)n} = useXX()

Mixins

export default {
  mixins: [ a, b, c, d, e, f, g ], //一個組件內(nèi)可以混入各種功能的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傳遞參數(shù)來改變邏輯

但是Vue3自定義Hooks卻可以：

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

Mixins

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

可以通過調(diào)用Mixin內(nèi)部方法來傳遞參數(shù)，卻無法直接給Mixin傳遞參數(shù)，因為Mixin不是函數(shù)形式暴露的，不發(fā)傳參

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,
  };
}

組件內(nèi)

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

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

3、Mixin同名變量會被覆蓋

Vue3自定義Hook可以在引入的時候?qū)ν兞恐孛?/p>

Mixins

export default {
  mixins: [ addMixin, subMixin], //組件內(nèi)混入加法和減法Mixin
  mounted(){
      this.add(num1,num2) //調(diào)用加法addMixin內(nèi)部的add方法
      this.sub(num1,num2) //調(diào)用減法subMixin內(nèi)部的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”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內(nèi)容的文章，歡迎關注億速云行業(yè)資訊頻道。