minxin和hook的使用与对比
1. mixin (Vue2)
-
mixin可以把多个组件共用的配置提取成一个换入对象
-
show.js文件(mixin)
export const mixin_name = { methods:{ showName(){ alert(this.name) } }, }
-
School.js文件(引用mixin)
<template> <div> <h2 @click="showName">学校名称:{{name}}</h2> <h2>学校地址:{{address}}</h2> </div> </template> <script> import {mixin_name} from '../mixin' export default{ name:'school', data(){ return { name: 'xxx' address:'xxxx' } }, //引入后上方的ShowName就可以正常使用了 mixins:[mixin_name] } </script>
-
注意事项:
- mixins中的生命周期会与引入mixins的组件的生命周期整合在一起调用
- 组件的data、methods、filters会覆盖mixins里的同名data、methods、filters
2. hook (Vue3)
-
hook本质是一个函数,将setup函数中使用的Composition API进行封装,类似于Vue2中的mixin
-
usePoint.js文件(hook)
//实现监控鼠标移动坐标的功能 import {reactive,onMounted,onBeforeUnmount} from 'vue' export default function(){ let point = reactive({ x:0, y:0 }) function savePoint(event){ point.x = event.pageX point.y = event.pageY console.log(event.pageX,event.pageY) } onMounted(()=>{ window.addEventListener('click',savePoint) }) onBeforeUnmount(()=>{ window.removeEventListener('click',savePoint) }) return point }
Demo.js(引用hook)
<template> <h2>当前点击时鼠标坐标为x:{{point.x}},y:{{point.y}}</h2> </template> <script> import {ref} from 'vue' import usePoint from '../hooks/usePoint' export default{ name:'Demo', setup(){ const point = usePoint() } } </script>
3. mixin和hook的对比
-
mixin相比hook的缺点
-
变量来源不明确(隐式传入),不利于阅读,使代码变得难以维护
mixin中的变量和方法都是直接插入组件中的,不需要显式的调用,这样就会很难分清到底调用的是哪个mixin中的哪个方法
-
同名属性、同名方法无法融合,可能会导致冲突
minxin之间的同名属性、同名方法会导致冲突,也有可能相互覆盖输出结果,加上组件会覆盖mixin的同名方法和变量,乱上加乱
-
mixin和组件可能出现多对多的关系,复杂度较高
一个mixin可能对应多个组件,一个组件也可以使用多个mixin
-
-
hook的优点
hook
是一个函数,mixin
是一个对象hook
就是拆分版的mixin
,将导入操作交给开发者,能够清楚地溯源每个属性和方法
原文地址:http://www.cnblogs.com/Solitary-Rhyme/p/16913955.html
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,请务用于商业用途!
3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"gltf",如遇到无法解压的请联系管理员!
8. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载
声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性