Vue 2.0 源码略读：剖析 data 的读取过程

2023-12-03 15:42:33

Vue.js，作为时下前端开发最流行的框架之一，以其简洁高效、灵活易用的特性备受广大开发者的青睐。其核心代码的实现原理也自然成为业内津津乐道的话题。本文将对 Vue 2.0 的源码进行简要解析，详细剖析 data 中变量的读取过程，深入探究 this 如何直接访问 data 中的变量，并揭示 new Vue() 时发生的内部机制。

this 如何访问 data 中的变量？

Vue 2.0 中，data 是一个对象，存储着组件的状态数据。当我们在组件中访问 data 中的变量时，可以直接使用 this 来访问。这是因为，在 Vue 2.0 的初始化过程中，会通过 Object.defineProperty 将 data 中的变量添加到组件实例上。

具体来说，在 Vue 2.0 的构造函数 _init 中，会执行如下代码：

for (var key in options.data) {
  this._data[key] = options.data[key];
  this._proxy(key);
}

这段代码将 options.data 中的变量逐一添加到 this._data 对象上。同时，还会调用 this._proxy 方法，将这些变量代理到 this 上。

this._proxy 方法的实现如下：

_proxy: function (key) {
  var self = this;
  Object.defineProperty(this, key, {
    configurable: true,
    enumerable: true,
    get: function proxyGetter () {
      return self._data[key]
    },
    set: function proxySetter (val) {
      self._data[key] = val
    }
  })
}