河南省和城乡建设厅网站首页,什么网站ghost做的好,中铁三局招聘要求,wordpress app生成看完vue3就开始看vue3的源码#xff0c;表示很懵~
刚把rollup打包搞完#xff0c;这不响应式就接着来了#xff01;#xff0c;还是写篇直接使用vue3的博客清清脑吧#xff01; 什么是hook、mixin#xff1f;
mixin:
Vue2中多个组件内存在重复JS业务逻辑#xff0c;使… 看完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函数时因为变量和函数是显示引用我们就可以通过解构赋值来避免函数和变量重名现象。 最后两个可以混搭但是不建议!
