乐趣区

关于vue.js:Vue3必会技巧自定义Hooks

jiezi

Vue3 自定义 Hooks 定义：

集体了解：一些 可复用的办法 像钩子一样挂着，能够随时被引入和调用以实现 高内聚低耦合 的指标，应该都能算是 hook；

为什么 Vue3 要用自定义 Hook？：

论断：就是为了让 Compoosition Api 更好用更饱满，让写 Vue3 更畅快！像写诗一样写代码！
其实这个问题更深意义是为什么 Vue3 比 Vue2 更好！无外呼 性能大幅度晋升 ，其实编码体验也是 Vue3 的长处Composition Api 的引入（解决 Option Api 在代码量大的状况下的强耦合） 让开发者有更好的开发体验。

集体碎碎念：然而这些所谓的进步开发体验都是须要开发者一直学习养成编码好习惯，同样是 Vue3 写 Compoosition Api 有的人就能写得和诗一样，有的人却能写得像💩一样（衷心希望每个开发者都有一颗对技术热衷的心，不要为了开发而开发，前人写翔让前人尝！道歉最近因为保护老我的项目太多感叹）

写 Vue3 请解脱 Vue2 无脑 this 的思维：

写 Vue2 中很多同学养成了 Option Api无脑 this 的习惯，来到 Vue3 的Composition Api还是习惯性想用 this，更有人为了写 this 不惜引入getCurrentInstance! 这大可不必！

Composition Api的长处之一就是 解脱无脑 this 导致的强耦合，性能之间相互 this，变量和办法在各个办法混淆，无处不在的 this 是强耦合的，尽管不便，然而碎片化的 option api 前期保护是麻烦的。

我置信写 Vue2 的同学，肯定深有感触，一个组件下定义大量变和大量办法，办法嵌套办法，办法之间相互共享变量 ，保护这样的代码，看似容易了解的Option Api 写法，咱们须要在 methos、data、template 之间来回切，Option Api这种写法，代码量和性能玲珑时是非常简单明了的，然而代码量一多，性能一简单，我置信 review 代码的时候头都痛。

绝对的 Composition Api 在性能简单、代码量微小的组件下，咱们配合 自定义 Hooks，将代码通过 性能分块写 ， 响应变量和办法在一起定义和调用 ，这样前期咱们改性能 A 只须要关注性能 A 块下的代码，不会像 Vue2 在Option Api 须要同时关注 methos 和 data。。。。。

几张动图再来温习一遍 Composition Api 好！

谢谢 大帅老猿 老师做的动图，Composition Api VS Option Api 的优缺点非常明了展现在了动画上！

Option Api代码量少还好，代码量多容易导致高耦合！

阐明：下面是 Vue2 Option Api 的写法，一个组件下含有 data、methos、computed、watch，同一个性能须要离开写在这些函数上，如果代码量少，那看起来仿佛非常明了清晰。一旦代码量大性能简单，各个性能离开写，保护的时候data、methos、computed、watch 都须要来回切，反而显得 过于扩散，又高度耦合。

Composition Api解耦 Vue2 Option Api 实现低耦合高内聚

阐明：如果是 Composition Api 在性能简单、代码量微小的组件下，咱们配合 自定义 Hook，将代码 按性能分块写，变量和办法在一起定义和调用 ，比方 A 性能下集成了响应式变量和办法，咱们前期保护只须要改变 A 功能模块下的代码，不会像 Vue2 在Option Api 须要同时关注逻辑扩散的 methos 和 data。

所以 自定义 Hook 的写 Vue3 必须把握的！它无不体现 Vue3 Composition Api 低耦合高内聚的思维！ 笔者在看了官网文档和开源的 admin 模板都是大量应用自定义 Hooks 的！

参考 vue 实战视频解说：进入学习

大胆定义一下 Vue3 的自定义 Hook：

尽管官网没有明确指明或定义什么是自定义 Hooks，然而却无处不在用；

以函数模式抽离一些 可复用的办法 像钩子一样挂着，随时能够引入和调用，实现 高内聚低耦合 的指标；

  1. 将可复用性能抽离为内部 JS 文件
  2. 函数名 / 文件名以 use 结尾，形如：useXX

  3. 援用时将响应式变量或者办法显式解构裸露进去如：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" style="width:100px" />
        <br />
        num2:<input v-model.number="num2" style="width:100px" />
    </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 对象解构很轻松给变量重命名

总结：

Vue2 时代 Option Api，data、methos、watch..... 离开写，这种是 碎片化 的扩散的，代码一多就容易 高耦合，保护时来回切换代码是繁琐的！

Vue3 时代 Composition Api，通过利用各种 Hooks 和自定义 Hooks 将碎片化的响应式变量和办法 按性能分块写 ，实现 高内聚低耦合

形象的讲法：Vue3 自定义 Hooks 是组件下的函数作用域的，而 Vue2 时代的 Mixins 是组件下的全局作用域。全局作用域有时候是不可控的，就像 var 和 let 这些变量申明关键字一样，const 和 let 是 var 的修改。Composition Api 正是对 Vue2 时代 Option Api 高耦合和随处可见 this 的黑盒的修改，Vue3 自定义 Hooks 是一种提高。

把 Mixin 和自定义 Hook 进行比拟，一个是 Option Api 的体现，一个是 Composition Api 的体现。如果能了解 高内聚低耦合 的思维，那么就能了解为什么 Vue3 是应用 Composition Api，并通过各种自定义 Hooks 使代码更强健。像写诗一样写代码。而不是写屎。

退出移动版