看完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:
特性:
- mixins中的生命周期会与使用mixins的组件的自带的生命周期在一起调用,mixins中的生命周期函数会比引入mixins的组件调用的快。
- 组件的data、methods、filters会覆盖mixins里的同名data、methods、filters。
- .不同mixin里的同名方法,按照引进的顺序,最后的覆盖前面的同名方法。
缺点:
-
变量来源不明确(隐式传入),不利于阅读,使代码变得难以维护
-
多个mixins的生命周期会融合到一起运行,但是同名属性、同名方法无法融合,可能会导致冲突或覆盖。
-
mixins和组件可能出现多对多的关系,复杂度较高
hook
(相较于mixin的优点)
-
Hook引入变量和方法是显示传入,能清楚的知道变量和方法的数据来源。
-
使用Hook函数时,因为变量和函数是显示引用,我们就可以通过解构赋值,来避免函数和变量重名现象。
最后,两个可以混搭但是不建议!