Vue源码探秘（new Vue）

[Cosen95]

引言

Vue的一个核心**是数据驱动，相信大家一定对这个不陌生。所谓数据驱动，就是视图由数据驱动生成。相比传统的使用jQuery等前端库直接操作DOM，大大提高了开发效率，代码简洁易维护。

先来看一个简单的例子:

<div id="app">
  {{ message }}
</div>
<script>
  var app = new Vue({
    el: "#app",
    data() {
      return {
        message: "hello Vue!"
      };
    }
  });
</script>

最终页面展示效果是:

如上图所示，页面上显示hello Vue!，也就是说Vue将js里的数据渲染到DOM上，也就是数据驱动视图，这个渲染过程就是最近几篇文章我们要着重分析的。

本篇文章，我们先来一起看下new Vue发生了什么。

_init()

Vue构造函数是定义在src/core/instance/index.js中的:

// src/core/instance/index.js
function Vue(options) {
  if (process.env.NODE_ENV !== "production" && !(this instanceof Vue)) {
    warn("Vue is a constructor and should be called with the `new` keyword");
  }
  this._init(options);
}

构造函数的核心是调用了_init方法，_init定义在src/core/instance/init.js中:

// src/core/instance/init.js
Vue.prototype._init = function(options?: Object) {
  const vm: Component = this;
  // a uid
  vm._uid = uid++;
  [1];
  let startTag, endTag;
  /* istanbul ignore if */
  if (process.env.NODE_ENV !== "production" && config.performance && mark) {
    startTag = `vue-perf-start:${vm._uid}`;
    endTag = `vue-perf-end:${vm._uid}`;
    mark(startTag);
  }

  // a flag to avoid this being observed
  vm._isVue = true;
  // merge options
  if (options && options._isComponent) {
    // optimize internal component instantiation
    // since dynamic options merging is pretty slow, and none of the
    // internal component options needs special treatment.
    initInternalComponent(vm, options);
  } else {
    vm.$options = mergeOptions(
      resolveConstructorOptions(vm.constructor),
      options || {},
      vm
    );
  }
  /* istanbul ignore else */
  if (process.env.NODE_ENV !== "production") {
    initProxy(vm);
  } else {
    vm._renderProxy = vm;
  }
  // expose real self
  vm._self = vm;
  initLifecycle(vm);
  initEvents(vm);
  initRender(vm);
  callHook(vm, "beforeCreate");
  initInjections(vm); // resolve injections before data/props
  initState(vm);
  initProvide(vm); // resolve provide after data/props
  callHook(vm, "created")[2];
  /* istanbul ignore if */
  if (process.env.NODE_ENV !== "production" && config.performance && mark) {
    vm._name = formatComponentName(vm, false);
    mark(endTag);
    measure(`vue ${vm._name} init`, startTag, endTag);
  }

  if (vm.$options.el) {
    vm.$mount(vm.$options.el);
  }
};

梳理下这里面的执行流程:

[1]和[2]之间的代码主要是进行了性能追踪，参考官网:

接下来是一个合并options的操作。

接下来调用了很多初始化函数，从函数名称可以看出分别是执行初始化生命周期、初始化事件中心、初始化渲染等操作。文章开头的 demo 中有定义data选项，我们先来分析下initState是如何处理data的:

// src/core/instance/state.js

export function initState(vm: Component) {
  vm._watchers = [];
  const opts = vm.$options;
  if (opts.props) initProps(vm, opts.props);
  if (opts.methods) initMethods(vm, opts.methods);
  if (opts.data) {
    initData(vm);
  } else {
    observe((vm._data = {}), true /* asRootData */);
  }
  if (opts.computed) initComputed(vm, opts.computed);
  if (opts.watch && opts.watch !== nativeWatch) {
    initWatch(vm, opts.watch);
  }
}

可以看到，initState函数是对props、methods、data、computed、watch这几项的处理。我们现在只关注initData对data的初始化:

// src/core/instance/state.js
function initData(vm: Component) {
  let data = vm.$options.data;
  data = vm._data = typeof data === "function" ? getData(data, vm) : data || {};
  if (!isPlainObject(data)) {
    data = {};
    process.env.NODE_ENV !== "production" &&
      warn(
        "data functions should return an object:\n" +
          "https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function",
        vm
      );
  }
  // proxy data on instance
  const keys = Object.keys(data);
  const props = vm.$options.props;
  const methods = vm.$options.methods;
  let i = keys.length;
  while (i--) {
    const key = keys[i];
    if (process.env.NODE_ENV !== "production") {
      if (methods && hasOwn(methods, key)) {
        warn(
          `Method "${key}" has already been defined as a data property.`,
          vm
        );
      }
    }
    if (props && hasOwn(props, key)) {
      process.env.NODE_ENV !== "production" &&
        warn(
          `The data property "${key}" is already declared as a prop. ` +
            `Use prop default value instead.`,
          vm
        );
    } else if (!isReserved(key)) {
      proxy(vm, `_data`, key);
    }
  }
  // observe data
  observe(data, true /* asRootData */);
}

这里给实例添加了属性_data并把data赋值给它，然后判断data如果是一个函数的话会检查函数返回值是不是纯对象，如果不是会抛出警告。

我们知道，在Vue中，data属性名和methods中的函数名、props的属性名都不能重名，这就是接下来的代码所做的工作了。这里遍历了data的所有属性，去和methods和props中的进行对比，如果有重名则会抛出警告。如果没有重名并且isReserved返回 false 的话，就接着执行proxy方法。下面是proxy部分的代码:

// src/core/instance/state.js
const sharedPropertyDefinition = {
  enumerable: true,
  configurable: true,
  get: noop,
  set: noop
};

export function proxy(target: Object, sourceKey: string, key: string) {
  sharedPropertyDefinition.get = function proxyGetter() {
    return this[sourceKey][key];
  };
  sharedPropertyDefinition.set = function proxySetter(val) {
    this[sourceKey][key] = val;
  };
  Object.defineProperty(target, key, sharedPropertyDefinition);
}

这里其实是做了一层代理，先是定义一个属性描述符sharedPropertyDefinition，然后调用Object.defineProperty，意思就是当访问/修改target.key时会触发get/set，代理到this[sourceKey][key]（即vm[_data][key]）上。

先来看一下，平时我们是怎么写Vue的:

<script >
export default {
  data() {
    return {
      name: '森林'
    }
  },
  methods: {
    print() {
      console.log(this.name);
    }
  }
}
</script>

在methods中通过this.name就能直接访问到data里面的值（实际上是访问了this._data.name）。到这里，我们就清楚了为什么在initData一开始的代码，开头有一行是将data保存到vm._data中。

回到initData中，接着上面的继续往下走，最后就是调用observe对数据做了响应式处理。响应式处理部分比较重要，我会在后面的章节中详细分析。

看完initData，我们回到_init函数。经过一系列的初始化操作后，最后一步是判断vm.$options.el是否存在，也即传入的对象是否有el属性，有的话就调用vm.$mount进行挂载，挂载的目标就是把模板渲染成最终的DOM。

总结

通过本篇文章，我们知道了执行new Vue后其实是执行_init进行了一系列初始化的操作。本文呢，我们是把_init函数大致的执行流程梳理了一遍。上文也提到函数的最后调用了vm.$mount进行挂载，这一步操作是数据渲染到DOM上的关键，在下一篇中，我会带大家一起看下$mount内部具体进行了什么操作。