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

2024-01-04 13:24:50

前言

上一篇文章中，我们介绍了 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 对象中不存在某个键的合并策略，那么子选项中的键值将被直接复制到新的对象中。