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
//减法功能-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" /> <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
//平均功能-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对象解构很轻松给变量重命名
以上就是vue3中怎么自定义hooks的详细内容。