Vue mixin（混合）笔记

Vue mixins(混合)

用途

为组件定义可复用的方法，可以在mixin对象里定义组件的任何属性，在组件使用mixin时，mixin中的属性会添加到组件属性中

定义mixin

组件内mixin

<template>
  <div class="mixins">
    <span>{{msg | uppercase}}</span>
  </div>
</template>

<script>
  const myMixin = {
    created(){
      this.hello();
    },
    methods: {
      hello(){
        window.console.log(this.msg)
      }
    }
  };
  export default {
    mixins: [myMixin],
    name: 'mixins',
    data () {
      return {
        msg: 'mixin',

      }
    }
  }
</script>

全局mixin（使用Vue.mixin()方法）

Vue.mixin({
  created(){
    console.log('global mixin')
  }
});

在定义全局mixin之创建的Vue实例都会将mixin对象里的属性添加到实例中

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
});
const Component = Vue.extend({
  template:'<span>121</span>'

});
Vue.mixin({
  created(){
    window.console.log('global mixin')
  }
});
const component=new Component();

这段代码中由于mixin是在App生成之后定义的，只会在创建Component实例的时候才会添加到实例属性中，created执行一次。

全局mixin与组件内mixin冲突

• case1:

  /*全局mixin*/
  Vue.mixin({
    created(){
      window.console.log('global mixin')
    },
    methods:{
      hello(){
        window.console.log('global:'+this.msg)
      }
    }
  });
  /*组件内mixin*/
  const myMixin = {
      created(){
        this.hello();
      },
      methods: {
      }
    };
  /*执行结果*/
  /*
  global mixin      main.js:16 
  global mixin      main.js:16
  global mixin      main.js:16
  global:mixin      main.js:20 全局mixin中定义的hello方法
  */
  

  每次创建组件时，全局mixin都会添加到组件实例中，如果全局mixin和组件内mixin有同名的钩子函数，钩子函数都会执行，并且先执行先执行全局后执行组件内。

• case2

  /*全局mixin*/
  Vue.mixin({
    created(){
      this.hello();
    },
    methods:{
      hello(){
        window.console.log('global:'+this.msg)
      }
    }
  });
  /*组件内mixin*/
  const myMixin = {
      created(){
        this.hello();
      },
      methods: {
        hello(){
          window.console.log(this.msg)
        }
      }
    };
  /*执行结果*/
  /*
  global:undefined          main.js:20
  global:undefined      main.js:20 //这是其他组件调用的全局mixin
  mixin             app.8b4a0e8….js:161 //全局中的
  mixin             app.8b4a0e8….js:161 //组件中的
  */
  

  对于非钩子函数，组件实例的对象属性，组件内的会覆盖全局的。

• case3:组件内定义的options与mixin冲突

  /*全局mixin:同case2*/
  /*组件内mixin:同case2*/
  /*组件内定义的options*/
  export default {
      mixins: [myMixin],
      name: 'mixins',
      created(){
        window.console.log('inner');
          this.hello();
      },
      data () {
        return {
          msg: 'mixin',
  
        }
      },
      methods:{
          hello(){
            window.console.log('inner:'+this.msg)
          }
      }
    }
  /*执行结果*/
  /*
  global:undefined          main.js:20
  global:undefined          main.js:20
  inner:mixin           app.bd90e4d….js:181 
  inner:mixin           app.bd90e4d….js:181 
  inner             app.bd90e4d….js:169 
  inner:mixin           app.bd90e4d….js:181
  */
  

总结：Vue混合策略

1. vue 是安装 全局mixin——组件内mixin——组件options的顺序来合并组件实例的options。
2. 对于钩子函数，会添加到一个函数数组里，执行顺序从前到后
3. 对于组件的对象属性（methods等）,后面的会覆盖前面的

实现全局mixin的钩子函数在指定组件中执行／不执行

​ 在时机使用过程中，如果希望钩子函数中的代码只在指定的组件中执行，可以使用组件自定义options来实现，类似methods等，在定义组件时添加自定义标记：

/*全局mixin*/
Vue.mixin({
  created(){
    if(this.$options['myOptions']){
      console.log('run');
      this.hello();
    }

  }
});
/*组件内添加*/
myOptions:{
        run:true
    }
/*运行结果*/
/*
run             main.js:17
inner:mixin     app.ab88047….js:176 
*/

相关链接

• 示例代码地址：https://github.com/mingyuanke/vue-study
• vue官网地址:http://vuejs.org/