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，然而却无处不在用；
以函数模式抽离一些可复用的办法像钩子一样挂着，随时能够引入和调用，实现高内聚低耦合的指标；
- 将可复用性能抽离为内部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
//减法性能-Hookimport { 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
//均匀性能-Hookimport { 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使代码更强健。像写诗一样写代码。而不是写屎。