阅读:1301回复:0
vue之混入(mixin)的详解
一、前言:
混入的作用:可以省很多代码(高类聚低耦合),还方便维护; 个人理解:混入就是在一个公共的实例中写入公共的数据或者方法,这样的话vue会自动注入到(全局混入会注入到每一个实例组件中)、(单页面引入的会注入到引入的组件中)。混入的对象也就是mixin中可以写入的内容包含任意组件选项- - - - - -(也就是说你在export default { } 里边的内容都是可以混入的)有一种类似公共方法的感觉,但是可以写公共的data里面的数据,这一点比较方便。 在vue中,mixin其实非常的好用,mixin提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。接下来我们就具体的了解一下mixin及mixin的用法。 在我们做项目的时候,往往有很多代码逻辑是通用的,比如说,业务逻辑类型的判断,时间戳的转换,url中字符串的截取等等,这些函数如果在每个需要的页面中都加入的话,不仅加重了当前页面的逻辑复杂程度,还会占用大量原本可以省略的内存。因此,将这些代码整理出来统一管理是很有必要的,在vue项目中,我们都知道模块化和组件化,但vue的框架中还有一个很好用的知识点,就是mixin。 mixin不仅可以存放data、watch、methods、computed等,还可以存放Vue的生命周期,是不是很神奇呢? ,mixin究竟有啥用呢?那就是代码复用 ———————————————— 在main.js中引入混入对象并全局注册 import mixin from './mixin/mixin' Vue.mixin(mixin); 这里需要注意的是,在全局注册混入对象的时候是Vue.mixin(mixin);不是Vue.use(mixin); 这样第一种方法,就全局注入到每一个spa实例中了。 科普一下:spa应用就是单页面应用、像我们平时所做的vue项目都是spa应用; 注意事项: 1、而对于混入对象以及组件自身的created钩子函数呢,它们都将被调用。但混入对象的钩子会在组件自身的钩子之前调用。 2、如果组件自身定义了与钩子对象中同名的数据或方法,为了避免冲突,vue将优先使用组件自身的数据或方法 (也就是重名了就只会调用组件内部的数据或方法)。 ———————————————— 版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 原文链接:https://blog.csdn.net/qq_43353619/article/details/108051244 |
|