Vue2.0 源码解读系列（二）——来拆开 Vue 的神秘礼盒：合并选项

前言

上一篇文章中，我们介绍了 Vue2.0 的初始化过程，并且对 initMixin() 方法做了详细的分析。在 initMixin() 方法中，我们提到了 mergeOptions() 方法，这是一个非常重要的合并选项方法，它决定了 Vue 实例最终的选项。在本文中，我们将对 mergeOptions() 方法进行详细的解读。

mergeOptions() 方法的实现

在 src/core/util/options.js 文件中，我们可以找到 mergeOptions() 方法的实现。首先，它会创建一个新的对象来存储最终的选项：

var mergeOptions = function (parent, child, vm) {
  var options = {};
  var key;
  for (key in parent) {
    mergeField(key);
  }
  for (key in child) {
    if (!parent.hasOwnProperty(key)) {
      mergeField(key);
    }
  }
  return options;
};

然后，它会遍历父选项和子选项，并将它们合并到新的对象中。如果子选项中存在某个键，而父选项中不存在，那么子选项中的键值将被直接复制到新的对象中。如果父选项和子选项中都存在某个键，那么这两个键值将被合并。

mergeField() 方法的实现

在 mergeOptions() 方法中，我们提到了 mergeField() 方法。这个方法负责合并父选项和子选项中的某个键值。它的实现如下：

var mergeField = function (key) {
  var strat = strats[key];
  if (strat) {
    options[key] = strat(parent[key], child[key], vm, key);
  } else {
    options[key] = child[key];
  }
};

首先，它会从 strats 对象中获取合并策略。strats 对象是一个包含各种合并策略的集合。如果 strats 对象中存在某个键的合并策略，那么这个合并策略将被使用来合并父选项和子选项中的键值。如果 strats 对象中不存在某个键的合并策略，那么子选项中的键值将被直接复制到新的对象中。

合并策略

在 strats 对象中，包含了各种各样的合并策略。这些合并策略决定了父选项和子选项中的键值如何合并。下面列举了几个常用的合并策略：

• data：将父选项和子选项中的数据对象合并在一起，子选项中的数据对象将覆盖父选项中的数据对象。
• methods：将父选项和子选项中的方法对象合并在一起，子选项中的方法对象将覆盖父选项中的方法对象。
• computed：将父选项和子选项中的计算属性对象合并在一起，子选项中的计算属性对象将覆盖父选项中的计算属性对象。
• watch：将父选项和子选项中的侦听器对象合并在一起，子选项中的侦听器对象将覆盖父选项中的侦听器对象。

总结

在本文中，我们对 Vue2.0 的 mergeOptions() 方法和 mergeField() 方法进行了详细的分析。我们了解了这两个方法是如何实现的，以及它们是如何使用合并策略来合并父选项和子选项中的键值的。这些知识对于我们理解 Vue2.0 的初始化过程和选项合并过程非常重要。