4.最俗学习之-Vue源码学习-合并策略(上)

源码地址

先说下上一篇留下的问题

if (child.mixins) {
  for (let i = 0, l = child.mixins.length; i < l; i++) {
    let mixin = child.mixins[i]
    if (mixin.prototype instanceof Vue) {  // 这个if暂时不明白功能作用，一般的用法都不会走这里
      mixin = mixin.options
    }
    parent = mergeOptions(parent, mixin, vm)
  }
}

// 这段代码就是把传入的每一项mixins遍历，然后执行mergeOptions合并，mixin只能是数组的形式，所以，
// 这里就是对mixin的一个递归调用，知道后面没有mixin这一字段为止，比如下面这种情况




  
  


  

    
{{msg}}
  





// 这里就是不断对有mixin的字段进行合并，关键在于对于data，created还有其他的属性等等的合并方法，
// 不同的字段属性用不同的方法，这个才是Vue合并策略的重点，也就是这一段

const options = {}
let key
for (key in parent) {
  mergeField(key)
}
for (key in child) {
  if (!hasOwn(parent, key)) {
    mergeField(key)
  }
}
function mergeField (key) {
  const strat = strats[key] || defaultStrat
  options[key] = strat(parent[key], child[key], vm, key)
}

// 而重点在于先前说过的strat对象，如下

strats = {
  el: function (parent, child, vm, key) {
    return defaultStrat(parent, child)
  },
  propsData: function (parent, child, vm, key) {
    return defaultStrat(parent, child)
  },
  data: function (parentVal: any,childVal: any,vm?: Component) {
    do something...
  },
  beforeCreate: function mergeHook () {
    do something...
  },
  created: function mergeHook () {
    do something...
  },
  beforeMount: function mergeHook () {
    do something...
  },
  mounted: function mergeHook () {
    do something...
  },
  beforeUpdate: function mergeHook () {
    do something...
  },
  updated: function mergeHook () {
    do something...
  },
  beforeDestroy: function mergeHook () {
    do something...
  },
  destroyed: function mergeHook () {
    do something...
  },
  activated: function mergeHook () {
    do something...
  },
  deactivated: function mergeHook () {
    do something...
  },
  components: function mergeAssets () {  // 这里加上个s复数
    do something...
  },
  directives: function mergeAssets () {  // 这里加上个s复数
    do something...
  },
  filters: function mergeAssets () {  // 这里加上个s复数
    do something...
  },
  watch: function (parentVal: ?Object, childVal: ?Object) {
    do something...
  },
  props: function (parentVal: ?Object, childVal: ?Object) {
    do something...
  },
  methods: function (parentVal: ?Object, childVal: ?Object) {
    do something...
  },
  computed: function (parentVal: ?Object, childVal: ?Object) {
    do something...
  }
}

下一篇则重点学习这个，在这先把之前留下的一个问题解决

• initMixin(Vue)

src\core\global-api\mixin.js

export function initMixin (Vue: GlobalAPI) {
  Vue.mixin = function (mixin: Object) {
    this.options = mergeOptions(this.options, mixin)
  }
}

// 这个this.options便是之前说过的Vue.options

Vue.options = {
  components: {
      KeepAlive,
      Transition,
      TransitionGroup
  },
  directives: {
      model,
      show
  },
  filters: {},
  _base: Vue
}

// 比如下面这个例子




  
  


  

    
{{msg}}
  





// 这里和上面一样，还是合并所有的mixin字段，直到没有为止，但是这里有个疑问
// 全局混合的属性在所有的组件里面都有的，但是这里没有看到Vue用什么方法区分的！！！

剩下的几个问题

Vue.set = set                       // 涉及到Vue的数据响应式系统，先保留
Vue.delete = del                    // 涉及到Vue的数据响应式系统，先保留
Vue.nextTick = util.nextTick        // 水平有限，看不懂 - -#
initExtend(Vue)                     // 水平有限，看不懂 - -#


extend(Vue.options.directives, platformDirectives)  // 水平有限，看不懂 - -#
extend(Vue.options.components, platformComponents)  // 水平有限，看不懂 - -#
Vue.prototype.__patch__                             // 水平有限，看不懂 - -#
compileToFunctions                                  // 水平有限，看不懂 - -#


const extendsFrom = child.extends                   // 水平有限，看不懂 - -#