扒一扒Vue（version：2.6.11）的混入Mixins

这两天突然想到之前遇到的一个问题，在组件中和混入文件的watch里侦听同一个变量，这时会发现变量改变时两个侦听函数都执行了，并且混入文件中的对应侦听函数先执行，这跟我的理解不太一样，我的理解是同一个变量的侦听组件中的会覆盖混入文件中的，即两个对象键名冲突时，取组件对象的键值对。现象如下图：

workflow.vue:

workFlowMixins.js:

这个时候还是去官网看下混入的介绍比较合适，在官网中有这么一句话：

当初看这段的时候我理所当然的以为watch的合并原则也是如此的，可事实啪啪打脸，正所谓不要以为你以为的就是你以为的，为了弄清混入的合并策略，这两天我对vue源码这一部分的内容作了个简单梳理。

1、mixin混入api

vue/src/core/global-api/mixin.js，这段代码中的mergeOptions是混入的关键，所以我们继续往下扒。

/* @flow */

import { mergeOptions } from '../util/index'

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

2、mergeOptions

mergeOptions的主要逻辑是在vue/src/core/util/options.js文件中。

/**
 * Merge two option objects into a new one.
 * Core utility used in both instantiation and inheritance.
 */
export function mergeOptions (
  parent: Object,
  child: Object,
  vm?: Component
): Object {
  if (process.env.NODE_ENV !== 'production') {
    checkComponents(child)
  }

  if (typeof child === 'function') {
    child = child.options
  }

  normalizeProps(child, vm)
  normalizeInject(child, vm)
  normalizeDirectives(child)

  // Apply extends and mixins on the child options,
  // but only if it is a raw options object that isn't
  // the result of another mergeOptions call.
  // Only merged options has the _base property.
  if (!child._base) {
    if (child.extends) {
      parent = mergeOptions(parent, child.extends, vm)
    }
    if (child.mixins) {
      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)
  }
  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)
  }
  return options
}

在此文件中我们可以找到mergeOptions函数，在此函数中最为关键的就是下面两行，这两行代码就是区分各选项所使用的合并策略的。

const strat = strats[key] || defaultStrat
options[key] = strat(parent[key], child[key], vm, key)

3、defaultStrat

defaultStrat是默认策略

/**
 * Default strategy.
 */
const defaultStrat = function (parentVal: any, childVal: any): any {
  return childVal === undefined
    ? parentVal
    : childVal
}

defaultStrat传入两个参数parentVal、childVal，其中parentVal和childVal是每一次合并中的源和目标对象，比如：mixin.options.xx和vm.options.xx（请注意我书写的顺序，这很重要）；采用的合并的策略为子组件选项不存在时返回父组件选项，否则返回子组件。

• 全局注册的混入最先完成混入，并按注册的顺序来逐个合并，先注册的先完成混入合并，依次类推

• 局部注册的混入次之，并按mixins数组里声明的顺序依次完成合并

• 每个混入也可以包含mixins局部混入数组，mixins先完成合并，本混入的options再进行合并

• 组件options最后完成混入合并

• 先合并的"优先级"低，后合并的"优先级"高，也就是组件的options合并优先级最高

• 不同的选项根据自身的混入策略合并方向不一样

4、strats[key]

strats[key]是不同的选项自身的混入策略，主要有：

1） el，propsData

/**
 * Options with restrictions
 */
if (process.env.NODE_ENV !== 'production') {
  strats.el = strats.propsData = function (parent, child, vm, key) {
    if (!vm) {
      warn(
        `option "${key}" can only be used during instance ` +
        'creation with the `new` keyword.'
      )
    }
    return defaultStrat(parent, child)
  }
}

通过上述代码可以看出：el和propsData的合并策略就是属于默认合并策略。

2）data

strats.data：

/**
 * Helper that recursively merges two data objects together.
 */
function mergeData (to: Object, from: ?Object): Object {
  if (!from) return to
  let key, toVal, fromVal

  const keys = hasSymbol
    ? Reflect.ownKeys(from)
    : Object.keys(from)

  for (let i = 0; i < keys.length; i++) {
    key = keys[i]
    // in case the object is already observed...
    if (key === '__ob__') continue
    toVal = to[key]
    fromVal = from[key]
    if (!hasOwn(to, key)) {
      set(to, key, fromVal)
    } else if (
      toVal !== fromVal &&
      isPlainObject(toVal) &&
      isPlainObject(fromVal)
    ) {
      mergeData(toVal, fromVal)
    }
  }
  return to
}

/**
 * Data
 */
export function mergeDataOrFn (
  parentVal: any,
  childVal: any,
  vm?: Component
): ?Function {
  if (!vm) {
    // in a Vue.extend merge, both should be functions
    if (!childVal) {
      return parentVal
    }
    if (!parentVal) {
      return childVal
    }
    // when parentVal & childVal are both present,
    // we need to return a function that returns the
    // merged result of both functions... no need to
    // check if parentVal is a function here because
    // it has to be a function to pass previous merges.
    return function mergedDataFn () {
      return mergeData(
        typeof childVal === 'function' ? childVal.call(this, this) : childVal,
        typeof parentVal === 'function' ? parentVal.call(this, this) : parentVal
      )
    }
  } else {
    return function mergedInstanceDataFn () {
      // instance merge
      const instanceData = typeof childVal === 'function'
        ? childVal.call(vm, vm)
        : childVal
      const defaultData = typeof parentVal === 'function'
        ? parentVal.call(vm, vm)
        : parentVal
      if (instanceData) {
        return mergeData(instanceData, defaultData)
      } else {
        return defaultData
      }
    }
  }
}

strats.data = function (
  parentVal: any,
  childVal: any,
  vm?: Component
): ?Function {
  if (!vm) {
    if (childVal && typeof childVal !== 'function') {
      process.env.NODE_ENV !== 'production' && warn(
        'The "data" option should be a function ' +
        'that returns a per-instance value in component ' +
        'definitions.',
        vm
      )

      return parentVal
    }
    return mergeDataOrFn(parentVal, childVal)
  }

  return mergeDataOrFn(parentVal, childVal, vm)
}

上述代码解读：如果传入参数vm，则表示组件为根实例。若子选项data存在但是不为function类型，直接返回父选项；否则进行合并策略。合并策略按照从父到子开始递归合并，以child为主，比较key规则如下：

• 若child无此key，parent有，直接合并此key

• 若child和parent都有此key，且非object类型，忽略不作为

• 若child和parent都有此key，且为object类型，则递归合并对象

3）生命周期钩子

/**
 * Hooks and props are merged as arrays.
 */
function mergeHook (
  parentVal: ?Array<Function>,
  childVal: ?Function | ?Array<Function>
): ?Array<Function> {
  const res = childVal
    ? parentVal
      ? parentVal.concat(childVal)
      : Array.isArray(childVal)
        ? childVal
        : [childVal]
    : parentVal
  return res
    ? dedupeHooks(res)
    : res
}

function dedupeHooks (hooks) {
  const res = []
  for (let i = 0; i < hooks.length; i++) {
    if (res.indexOf(hooks[i]) === -1) {
      res.push(hooks[i])
    }
  }
  return res
}

LIFECYCLE_HOOKS.forEach(hook => {
  strats[hook] = mergeHook
})

其中LIFECYCLE_HOOKS如下：

//vue/src/shared/constants.js
export const LIFECYCLE_HOOKS = [
  'beforeCreate',
  'created',
  'beforeMount',
  'mounted',
  'beforeUpdate',
  'updated',
  'beforeDestroy',
  'destroyed',
  'activated',
  'deactivated',
  'errorCaptured',
  'serverPrefetch'
]

上述代码可以看出对LIFECYCLE_HOOKS遍历之后，生成每个生命周期的策略，通过mergeHook从父到子开始一步步链接合并成数组，父在前，子在后。在钩子触发时，按照数组从左至右按顺序调用触发。

4）component，directive，filter

/**
 * Assets
 *
 * When a vm is present (instance creation), we need to do
 * a three-way merge between constructor options, instance
 * options and parent options.
 */
function mergeAssets (
  parentVal: ?Object,
  childVal: ?Object,
  vm?: Component,
  key: string
): Object {
  const res = Object.create(parentVal || null)
  if (childVal) {
    process.env.NODE_ENV !== 'production' && assertObjectType(key, childVal, vm)
    return extend(res, childVal)
  } else {
    return res
  }
}

ASSET_TYPES.forEach(function (type) {
  strats[type + 's'] = mergeAssets
})

其中

//vue/src/shared/constants.js
export const ASSET_TYPES = [
  'component',
  'directive',
  'filter'
]

上述代码可以看出对ASSET_TYPES遍历之后，生成每个asset的合并策略，在mergeAssets中使用extend方法合并为一个对象，按照从子到父的顺序进行合并。const res = Object.create(parentVal || null)这边可以看出是将child合并到以parent为原型的对象上的，那么我们在使用的时候，在res中上查找（child），没有的再从原型上（parent）找，以此类推，所以child的优先级的更高。

5）watch

/**
 * Watchers.
 *
 * Watchers hashes should not overwrite one
 * another, so we merge them as arrays.
 */
strats.watch = function (
  parentVal: ?Object,
  childVal: ?Object,
  vm?: Component,
  key: string
): ?Object {
  // work around Firefox's Object.prototype.watch...
  if (parentVal === nativeWatch) parentVal = undefined
  if (childVal === nativeWatch) childVal = undefined
  /* istanbul ignore if */
  if (!childVal) return Object.create(parentVal || null)
  if (process.env.NODE_ENV !== 'production') {
    assertObjectType(key, childVal, vm)
  }
  if (!parentVal) return childVal
  const ret = {}
  extend(ret, parentVal)
  for (const key in childVal) {
    let parent = ret[key]
    const child = childVal[key]
    if (parent && !Array.isArray(parent)) {
      parent = [parent]
    }
    ret[key] = parent
      ? parent.concat(child)
      : Array.isArray(child) ? child : [child]
  }
  return ret
}

上述代码可以看出watch会将每个watcher合并成一个数组，从父到子顺序合并，在同名wather属性触发时，按照数组从左至右的顺序调用触发。同样也是父在前，子在后。

6）props、methods、computed、inject

/**
 * Other object hashes.
 */
strats.props =
strats.methods =
strats.inject =
strats.computed = function (
  parentVal: ?Object,
  childVal: ?Object,
  vm?: Component,
  key: string
): ?Object {
  if (childVal && process.env.NODE_ENV !== 'production') {
    assertObjectType(key, childVal, vm)
  }
  if (!parentVal) return childVal
  const ret = Object.create(null)
  extend(ret, parentVal)
  if (childVal) extend(ret, childVal)
  return ret
}

上述代码可以看出props，methods，computed，inject的合并策略和component，directive，filter比较相似，都是使用extend方法合并为一个对象，按照从子到父进行合并，所以child优先级更高。

7）provide

strats.provide = mergeDataOrFn

provide的合并策略和data类似，毕竟都是基于mergeDataOrFn实现的。

Time！