hook与mixin

---

看完vue3就开始看vue3的源码，表示很懵~

刚把rollup打包搞完，这不响应式就接着来了！，还是写篇直接使用vue3的博客清清脑吧！

---

什么是hook、mixin？

mixin:

Vue2中多个组件内存在重复JS业务逻辑，使用mixin将重复逻辑的代码进行抽离，实现代码的复用，避免代码冗余。

hook:

本质是一个函数，将setup中使用的组合式Api按功能进行封装，同时也能实现代码的复用。

---

怎样去使用mixin、hook?

mixin的使用：

（1）在src文件夹中创建mixins文件夹，在里面去写对应的mixin.js文件

（2）抽离要复用的代码

  data(){return {}},methods:{},computed:{},filters:{},created(){},mounted(){console.log("我是mixins");}
}

（3）最后在要使用的组件中进行引入

import引入抽离模块的js，然后配合mixins配置(值为一个数组)进行使用。

hook的使用

(1)在src文件夹中创建hooks文件夹，在里面去写对应的hook.js文件

(2)然后再hook.js文件中编写js程序

import { reactive, onMounted, onBeforeUnmount } from "@vue/runtime-core";
export default function () {//想要去实现代码的复用，方法是！！！！hook函数//实现鼠标打点相关的数据let point = reactive({x: 0,y: 0,});//实现鼠标打点的方法function savepoint(event) {point.x = event.pageX;point.y = event.pageY;}onMounted(() => {window.addEventListener("click", savepoint);});//当组件卸载的时候就去移除这个函数onBeforeUnmount(() => {window.removeEventListener("click", savepoint);});return point;
}

(3)最后再使用该功能的文件中进行引入

---

对比优缺点

mixin：

特性：

1. mixins中的生命周期会与使用mixins的组件的自带的生命周期在一起调用，mixins中的生命周期函数会比引入mixins的组件调用的快。
2. 组件的data、methods、filters会覆盖mixins里的同名data、methods、filters。
3. .不同mixin里的同名方法，按照引进的顺序，最后的覆盖前面的同名方法。

缺点：

1. 变量来源不明确（隐式传入），不利于阅读，使代码变得难以维护

2. 多个mixins的生命周期会融合到一起运行，但是同名属性、同名方法无法融合，可能会导致冲突或覆盖。

3. mixins和组件可能出现多对多的关系，复杂度较高

hook

（相较于mixin的优点）

1. Hook引入变量和方法是显示传入，能清楚的知道变量和方法的数据来源。

2. 使用Hook函数时，因为变量和函数是显示引用，我们就可以通过解构赋值，来避免函数和变量重名现象。

---

最后，两个可以混搭但是不建议!