Vue2视频教程系列第二十九节—混入 (mixins)

混入(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(微信）