vue2源码-十二、mixin的使用和原理

mixin的使用和原理

1. 使用：

   可以通过 Vue.mixin 来实现逻辑的复用,问题在于数据来源不明确。声明的时候可能对导致命名冲突 vue3 采用的就是 compositionAPI

   • 局部混入：

     var myMixin = {
       created: function () {
         this.hello()
       },
       methods: {
         hello: function () {
           console.log('hello from mixin!')
         }
       }
     }
     // 混入
     Vue.component('componentA',{
       mixins: [myMixin]
     })
     

   • 全局混入

     Vue.mixin({
       created: function () {
           console.log("全局混入")
         }
     })
     

2. 原理：

   初始化混入initMixin

   export function initMixin(Vue: GlobalAPI) {
     Vue.mixin = function (mixin: Object) {
       // this==Vue
       // 最终合并将mixin对象和Vue.options合并在一起
       this.options = mergeOptions(this.options, mixin);
       return this;
     };
   }
   

   主要是mergeOptions方法。

   分析这个函数：将options合并，最终合并将mixin对象和Vue.options合并在一起

   export function mergeOptions (
     parent: Object,
     child: Object,
     vm?: Component
   ): Object {
   
   if (child.mixins) { // 判断有没有mixin 也就是mixin里面挂mixin的情况 有的话递归进行合并
       for (let i = 0, l = child.mixins.length; i < l; i++) {
       parent = mergeOptions(parent, child.mixins[i], vm)
       }
   }
   
     const options = {} 
     let key
     for (key in parent) {
       mergeField(key) // 先遍历parent的key 调对应的strats[XXX]方法进行合并
     }
     for (key in child) {
       if (!hasOwn(parent, key)) { // 如果parent已经处理过某个key 就不处理了
         mergeField(key) // 处理child中的key 也就parent中没有处理过的key
       }
     }
     // 策略模式
     function mergeField (key) {
       const strat = strats[key] || defaultStrat
       options[key] = strat(parent[key], child[key], vm, key) // 根据不同类型的options调用strats中不同的方法进行合并
     }
     return options
   }
   

   注意：

   • 优先递归处理mixins
   • 先遍历合并parent中key，调用mergeField方法进行合并，然后保存变量options
   • 再遍历 child，合并补上 parent 中没有的key，调用mergeField方法进行合并，保存在变量options
   • 通过 mergeField 函数进行了合并