Vue mixins(混合)

用途

為組件定義可復用的方法，可以在mixin對象里定義組件的任何屬性拔疚，在組件使用mixin時，mixin中的屬性會添加到組件屬性中

定義mixin

組件內(nèi)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之創(chuàng)建的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生成之后定義的，只會在創(chuàng)建Component實例的時候才會添加到實例屬性中币励，created執(zhí)行一次吱殉。

全局mixin與組件內(nèi)mixin沖突

• case1:

  /*全局mixin*/
  Vue.mixin({
    created(){
      window.console.log('global mixin')
    },
    methods:{
      hello(){
        window.console.log('global:'+this.msg)
      }
    }
  });
  /*組件內(nèi)mixin*/
  const myMixin = {
      created(){
        this.hello();
      },
      methods: {
      }
    };
  /*執(zhí)行結(jié)果*/
  /*
  global mixin      main.js:16 
  global mixin      main.js:16
  global mixin      main.js:16
  global:mixin      main.js:20 全局mixin中定義的hello方法
  */
  

  每次創(chuàng)建組件時掸冤，全局mixin都會添加到組件實例中，如果全局mixin和組件內(nèi)mixin有同名的鉤子函數(shù)友雳，鉤子函數(shù)都會執(zhí)行稿湿，并且先執(zhí)行先執(zhí)行全局后執(zhí)行組件內(nèi)。

• case2

  /*全局mixin*/
  Vue.mixin({
    created(){
      this.hello();
    },
    methods:{
      hello(){
        window.console.log('global:'+this.msg)
      }
    }
  });
  /*組件內(nèi)mixin*/
  const myMixin = {
      created(){
        this.hello();
      },
      methods: {
        hello(){
          window.console.log(this.msg)
        }
      }
    };
  /*執(zhí)行結(jié)果*/
  /*
  global:undefined          main.js:20
  global:undefined      main.js:20 //這是其他組件調(diào)用的全局mixin
  mixin             app.8b4a0e8….js:161 //全局中的
  mixin             app.8b4a0e8….js:161 //組件中的
  */
  

  對于非鉤子函數(shù)押赊，組件實例的對象屬性饺藤，組件內(nèi)的會覆蓋全局的。

• case3:組件內(nèi)定義的options與mixin沖突

  /*全局mixin:同case2*/
  /*組件內(nèi)mixin:同case2*/
  /*組件內(nèi)定義的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)
          }
      }
    }
  /*執(zhí)行結(jié)果*/
  /*
  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
  */
  

總結(jié)：Vue混合策略

1. vue 是安裝 全局mixin——組件內(nèi)mixin——組件options的順序來合并組件實例的options。
2. 對于鉤子函數(shù)策精，會添加到一個函數(shù)數(shù)組里舰始，執(zhí)行順序從前到后
3. 對于組件的對象屬性（methods等）,后面的會覆蓋前面的

實現(xiàn)全局mixin的鉤子函數(shù)在指定組件中執(zhí)行／不執(zhí)行

? 在時機使用過程中，如果希望鉤子函數(shù)中的代碼只在指定的組件中執(zhí)行咽袜，可以使用組件自定義options來實現(xiàn)丸卷，類似methods等，在定義組件時添加自定義標記：

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

  }
});
/*組件內(nèi)添加*/
myOptions:{
        run:true
    }
/*運行結(jié)果*/
/*
run             main.js:17
inner:mixin     app.ab88047….js:176 
*/

相關(guān)鏈接

• 示例代碼地址：https://github.com/mingyuanke/vue-study
• vue官網(wǎng)地址:http://vuejs.org/