mixins混合

mixins混合

混合是一种灵活的分布式复用 Vue 组件的方式。混合对象可以包含任意组件选项。以组件使用混合对象时，所有混合对象的选项将被混入该组件本身的选项。

例子：

// 定义一个混合对象
var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}
// 定义一个使用混合对象的组件
var Component = Vue.extend({
  mixins: [myMixin]
})
var component = new Component() // -> "hello from mixin!"

Mixins一般有两种用途：

• 在已经写好的构造器后，需要增加方法或者临时的活动时使用的方法，这时会混入减少源代码的污染
• 很多地方都会用到的公用方法，用混入的方法可以减少代码量，实现代码复用

局部混合

    <div id="app">
        {{num}}
        <button @click="add">addNumber</button>
    </div>
    <script type="text/javascript">
        var mixin = {
            updated: function() {
                console.log("局部混合updated");
            }
        };
        new Vue({
           el: "#app",
            data: {
                num : 1
            },
            methods : {
                add : function() {
                    this.num++;
                }
            },
            updated : function(){
              console.log('原生updated');
            },
            mixins: [mixin]
        });

    </script>

当点击按钮，就可以看到控制台的输出了，如下面：

在这里需要注意它们的执行顺序，先是局部的Mixins中的updated，然后再是原生的updated

全局混合

Vue.mixin({
  updated : function() {
    console.log("全局updated");
  }
});

在前面的代码中添入上面的代码，这个时候的执行顺序会是怎样呢？如下

这个时候的执行顺序，就是全局mixin > 局部mixin > 原生