【Vue】强大的Mixin混入

什么是mixin？
个人理解：mixin可以定义公用的,data，created，methods，computed，watch…用来扩展父组件。

举个例子：
在页面中，引入了css样式文件。实际得到的是合并的css，同名css会被当前页面css覆盖。
同理，在vue中使用混入，混入的组件内容 将和本页面代码内容合并，并且会被本页面同名覆盖

为什么使用mixin？
vue页面开发时，有些代码在各个页面总是要写很多遍，代码都是一摸一样的，这时就需要mixin了，可以让页面干净整洁，代码量减少，冗余代码减少。

如何使用mixin？
一般来说，注入mixin有两种方式：

举个栗子🌰,以一个简单的数字递增来看：

exampleMixin.js

export default {
data() {
return {
count: 0
}
},
methods: {
addCount() {
setInterval(() => {
this.count++
}, 1000)
}
},
created() {
this.addCount(); // 结果：一秒递增1
}
}
页面自身注入方式：
// test.vue

import mixin from 'mixins/exampleMixin'

export default {
mixins: [mixin],
// 业务代码
....
}
全局注入方式：

//main.js

import Vue from 'vue';
import mixin from 'mixins/exampleMixin';
Vue.mixin(mixin)