这是我参与11月更文挑战的第4天，活动详情查看：11月更文挑战
Hook基本介绍
-
什么是hook? ------- 本质是一个函数, 把 setup 函数在使用 Composition API（组合式api）进行了封装。
-
类似于vue2.x中的 mixin。
-
自定义hook的优势, 复用代码, 让setup中的逻辑更清楚易懂。
下面我们就学习一下hook函数，以及对比vue2.x中的mixin的好处。
Hook使用
上面我们说了和mixin类似，所以使用也是类似的。我们需要在src文件夹中创建一个Hooks文件夹，在里面在创建相对应的hook.js文件即可。在命名时最好在文件前都加上（use）。如下图所示：
下面是usepint.js中的代码：
import {onBeforeMount, onUnmounted, reactive} from "vue";
export default function () {
//实现鼠标打点的数据
let mes = reactive({
x: 0,
y: 0
})
//实现打点的相关函数
function pint(event) {
mes.x = event.pageX
mes.y = event.pageY
console.log(event)
}
//实现鼠标打点的生命周期函数
onBeforeMount(() => {
window.addEventListener('click', pint)
})
//卸载时的周期函数
onUnmounted(() => {
window.removeEventListener('click', pint)
})
//必须有返回值,不然外面调用拿不到数据
return mes
}
在setup中能使用的函数，在hook函数中也都可以使用。
下面是在组件中使用上面定义的hook函数：
<template>
<div>
{{mes}}
点击时的坐标 x:{{mes.x}} y:{{mes.y}}
</div>
</template>
<script>
//引入hooks中的公用函数
import usepint from "../hooks/usepint";
export default {
name: 'App',
setup() {
//调用hook函数
let mes = usepint()
return {
mes
}
}
}
</script>
看到这里有的同学会说这和Vue2.x中的mixin用途一样呀，为什么Vue3中又会多出Hook函数呢，为什么呢？带着疑问下面就让我们一起探究。
在这里推荐同学们先去观看Vue2.x中的mixins详细介绍里面介绍了mixin的缺点，在看下面的内容就明白了。
Hook和mixin的对比
1.数据来源
mixin中的变量和方法是隐式引入，在一个组件中如果引用多个mixin，变量的来源会变得错综复杂，需要我们自己手动调试，才知道数据来源。
而使用Hook引入变量和方法是显示传入，能清楚的知道变量和方法的数据来源。
2.函数和变量重名现象
在一个组件中使用多个mixin可能会出现，函数和变量重名现象，就会导致冲突或覆盖现象。
而使用Hook函数时，因为变量和函数是显示引用，我们就可以通过解构赋值，来避免函数和变量重名现象。
总结
Vue3中的Hook函数确实解决了mixin中的一些不足之处，让我们代码的可读性和维护性大大增强。以上说的不对的地方，欢迎指出改进。
