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