Vue–混入(Mixin)

当不同组件有相同功能时，不必重复定义属性和方法，可使用vue中的混入(Mixin)来分发 Vue 组件中的可复用功能。一个 mixin 对象可以包含任意组件选项，即data、methods、生命周期、computed等。当组件使用 mixin 对象时，所有 mixin 对象的选项将被“混合”进入该组件本身的选项。

• mixin的钩子函数会先于组件执行

• mixin方法和参数在各组件中是不共享的

export const myMixins = {
   components:{},
   data(){
      return {
         count:1
      }
   },
   mounted() {},
   methods:{},
   computed:{}
}

组件1

// 引入
import {myMixins} from "@/目录";
export default {
   mixins:[myMixins], // 将mixin 对象的选项将被“混合”进入该组件本身的选项
   mounted() {
	  this.count = this.count+2
      console.log(this.count++) // 输出为3
   },
}

组件2直接输出为1

• 引入mixin后，组件会将mixin中的数据和方法扩展到当前组件中，在合并过程中如果出现冲突，会优先组件覆盖掉混入对象

import {myMixins} from "@/目录";
export default {
   mixins:[myMixins], // 将mixin 对象的选项将被“混合”进入该组件本身的选项
   data(){
   		return{ count:"测试" }
   },
   mounted() {
	  this.count = this.count+2
      console.log(this.count++) // 输出为 测试2
   },
}

• Mixin与Vuex的不同：Vuex具有响应式，即在任意组件中修改变量，其他组件中的变量也会随之改变，而Mixin的不共享，在任意组件中修改与其他组件互不影响

待续。。。