八小时实现迷你版vuejs三：实现数据响应化

上一篇我们比较overview的讲了vuejs 的架构，从这一篇开始我们来自己动手实现一个vuejs。

首先我们实现数据响应化，数据响应化的意思就是我们要能监听到任何数据变动。比如执行了 this.name = “Yao Ming” 之后，我们要能监听到这个改动。那么怎么实现呢？我们需要借助 ES5 提供的新特性 getter/setter。

构造函数 和 初始化

首先我们需要写一个 Vue 的构造函数，这里我们直接用ES6的Class语法实现一个Vue类：

class Vue {
  constructor (options) {
    this.init(options)
  }

  /**
   * 初始化的入口
   */
  init (options) {
    //...
    const el = document.querySelector(options.el)
    this._initState()
    //...
  }
}

这里省略了不相关的代码，完整代码请参阅tiny-vue。在 init 函数里面我们会调用 this._initState() 来做state的初始化，为了方便起见，这里我们只处理 data，而跳过对 props 的处理。
为了更好的封装代码，我们把对state的处理放在了 state.js 中。

Proxy

当我们创建一个Vue实例的时候是这样的：

new Vue({
  data: { //xxx}
})

而访问data的时候是这样的 this.name=“xxx”。显然vuejs会读取data中定义的数据，并把它“代理”到 this 上，这一步是也是通过getter/setter 来实现的。

思路就是：遍历 data 的所有 key ，然后在 this 上对每一个key也做一个 getter/setter ，在 getter/setter 内部依然去访问 data 上对应的key。

为了方便起见，首先给 data 做一个别名 this._data = options.data。
这是我们在 state.js 中