vue 2.5.1 源码学习 之Vue.extend 和 data的合并策略

Vue是一款流行的前端框架，Vue.extend方法则是Vue中非常重要的一个方法，它用于创建一个组件构造函数，这个构造函数是一个扩展自Vue的子类，它可以传入一个组件配置对象作为参数。那么对于Vue.extend和data的合并策略，我们需要从以下几个方面加以讲解：

一、Vue.extend方法的原理

Vue.extend方法的原理就是让我们可以基于Vue实例创建一个子类，这个子类可以继承父类的所有属性和方法。具体而言，Vue.extend内部先定义一个Sub类，然后在Sub类的原型上定义所有父类Vue中的原型方法和属性。再把我们传入的组件配置对象进行一次合并，生成新的组件，然后把这个组件挂在到Sub类的options属性上。

// 定义Vue.extend方法
Vue.extend = function (extendOptions: Object): Function {
  extendOptions = extendOptions || {}
  const Super = this
  const SuperId = Super.cid
  const cachedCtors = extendOptions._Ctor || (extendOptions._Ctor = {})
  if (cachedCtors[SuperId]) {
    return cachedCtors[SuperId]
  }
  const name = extendOptions.name || Super.options.name
  if (process.env.NODE_ENV !== 'production' && name) {
    validateComponentName(name)
  }
  const Sub = function VueComponent(options) {
    this._init(options)
  }
  Sub.prototype = Object.create(Super.prototype)
  Sub.prototype.constructor = Sub
  Sub.cid = cid++
  Sub.options = mergeOptions(
    Super.options,
    extendOptions
  )
  Sub['super'] = Super

  // 对组件配置对象进行一次混入合并
  if (Sub.options.props) {
    initProps(Sub)
  }
  if (Sub.options.computed) {
    initComputed(Sub)
  }

  // 优化patch的性能，缓存组件生成的VNode
  Sub.prototype.$isServer = isServer
  Sub.prototype.$ssrContext = options && options.ssrContext
  Sub.prototype.$options.components = Super.options.components

  // 缓存子类构造函数并返回该构造函数
  cachedCtors[SuperId] = Sub
  return Sub
}

二、data合并策略及示例

在数据合并策略中，Vue提供了3种合并策略，分别是默认策略、替换策略和自定义合并策略。

1.默认策略

默认的合并策略在不同的 Vue 选项中表现不一样。对于 data，由于应该一直是一个函数，所以默认合并策略会做一个merger，处理函数并返回。具体而言，如果在组件初始化时给出 data: { foo: 'bar' }，则 Vue 会将其合并到已存在的数据属性 $data 中。

2.替换策略

另外一种策略是完全覆盖，即当组件中定义的选项覆盖掉全局默认选项时，使用替换策略，例如：

Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) {
  return fromVal + toVal
}

// 全局注册的组件，设定全局默认值
Vue.component('my-component', {
  myOption: 'foo'
})
// 在局部注册的组件中修改同名选项
var Component = Vue.extend({
  myOption: 'bar'
})

3.自定义合并策略

你也可以为某个特定选项设置自定义合并策略，例如 created 钩子函数：

var vm = new Vue({
  created: function () {
    console.log('parent')
  }
})
var Child = Vue.extend({
  created: function () {
    console.log('child')
  }
})
var childComponent = new Child({
  parent: vm
})

// 控制台输出:                  
// => "parent"
// => "child"

在示例中，我们定义了一个Vue实例，在实例中定义了created钩子函数，同时也定义了一个名为Child的子类，该子类也定义了created钩子函数。然后，我们实例化这个子类的时候将其parent属性设定为Vue实例。由于 Vue 为不同的钩子函数分别提供了不同的合并策略，created 只是简单地将父子钩子函数合并成一个数组，等待执行。当子组件的created执行时，它执行了自己的钩子并且输出了 'child'。接下来，它将检查子组件上是否有相应钩子的父组件，如果有则执行父组件的钩子，并且输出了 'parent'。

三、总结

通过上面的分析，我们可以了解到Vue.extend方法的基本原理以及data的三种合并策略。Vue.extend是Vue中一个非常常用的方法，它可以帮助我们快速地创建出一个组件子类，并且继承父组件中的所有属性和方法。对于 data 的合并策略，我们也可以使用Vue.config-optionMergeStrategies自定义我们需要的合并策略。当然，Vue 中的数据合并策略不仅仅局限于 data 属性，还包括 methods、props 等属性，各个属性的合并策略也各不相同，需要根据实际情况进行选择和自定义。