Vue3中怎么自定义Hooks

本文小编为大家详细介绍“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”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。