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 &#39;vue&#39;
    import useAdd from &#39;./useAdd.js&#39;     //引入自动hook 
    import { useSub } from &#39;./useSub.js&#39; //引入自动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的详细内容,更多请关注www.sxiaw.com其它相关文章!