混入(mixins) 是一种分发Vue 组件中可复用功能的非常灵活的方式。
这句话好难懂啊！我暂且先不去给mixins下个定义，我来说明一下它在什么时机用，大家就可以了解了！mixins主要用在以下两个方面：
1. 当我们辛辛苦苦地做完一个项目，想好好放松的时候，突然又有新需求下达了，这时候我们怎么办？我们的构造函数已经这么完美了，我们怎么能去破坏它呢？所以呢，为了不污染我们的完美的构造函数，我们在构造函数外面定义一个mixins。这就是它的作用之一。
2. 一个项目中会经常会有公共的方法，这些公共的方法呢，我不想全都写在构造函数里，这时候我们就可以构造函数外面定义一个mixins，需要时就可以调用它。
这时候大家应该明白mixins是什么意思了吧，这是一个很有用的对象。
下面我们就看下如何使用它。
首先我们在构造函数外面定义为：
var countConsole = {
updated () {
console.log(this.count)
}
}
这里的updated是钩子函数，并不是我们自定义的函数。
接下来我们需要在构造函数里注册这个mixins,注意这个mixins是一个数组，也就是我们可以定义多个mixins对象。
mixins: [countConsole],
我们可以看到在控制台里依然可以输出累加的count数据。这个输出的操作我们是在构造函数外操作的。
问题来了，问题1:如果我在构造函数里也定义了updated，那么哪个优先级更高呢？我们可以做个测试：在mixins里我们做下改动：
var countConsole = {
updated () {
console.log(this.count+”这里是mixins里的内容”)
}
}
在构造函数里做如下操作，加入钩子函数：
updated () {
console.log(”这里是原生里的内容”)
}
可以看到，mixins里的优先级是比构造函数的优先级高的。
我们再来思考下，如果加入全局的updated的话，谁的优先级更高呢？我们再来做个测试：
首先引入vue
import Vue from 'vue'
再下来编写全局的updated:
Vue.mixin({
updated () {
console.log('这是全局内容')
}
})
我们可以看到优先级的排列是：
1. 全局
2. 局部mixin
3. 构造函数
问题3:我们在mixins里定义一个methods，我们再在构造函数里定义一个methods，如果命名重复，那么又会发生什么情况呢？
首先们在DOM里加入触发按钮：
<button class="button" @click=”bar”>提交
我们在mixins里加入methods
methods: {
bar() {
console.log('hello World')
}
}
我们在构造函数里加入methods
methods: {
bar() {
console.log('hello 小红)
}
}
我们会发现，在控制台里输出的是hello 小红。
这是为什么？如果methods里命名重复的话，只会执行构造函数里的函数，而不执行mixins里的函数。所以我们在mixins里定义函数时，不要与构造函数里的一样，这样会被构造函数里的函数覆盖的。
就到这里了，休息休息一会儿吧：）
欢迎关注前端学习交流群：duzhan2018(微信）
网友评论