八小时实现迷你版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 中的主要代码：
Vue.prototype._initData = function () {
var dataFn = this.$options.data
var data = this._data = dataFn ? ( typeof dataFn == 'function' ? dataFn() : dataFn ) : {}
var keys = Object.keys(data)
var i, key
i = keys.length
while (i--) {
key = keys[i]
this._proxy(key)
}
// observe data
observe(data, this)
}
Vue.prototype._proxy = function (key) {
// need to store ref to self here
// because these getter/setters might
// be called by child scopes via
// prototype inheritance.
var self = this
Object.defineProperty(self, key, {
configurable: true,
enumerable: true,
get: function proxyGetter () {
return self._data[key]
},
set: function proxySetter (val) {
self._data[key] = val
}
})
}这样，当我们在 this 上做读写操作的时候，实际上是对 this._data 做的操作。
Observer
下一步，我们需要检测任何对 this._data 的读写操作，在 vuejs中，这是通过 Observer 来实现的。
Observer 的作用就是：对传入的数据设置 getter/setter ，当调用 getter 时收集依赖，当调用 setter 时通知依赖。
暂时我们不用太纠结这个依赖 是什么，在后面讲到 Watcher 的时候会仔细讲这部分。
所以 Observer 做的事情其实和上一步的 Proxy 很像。那么这里就有一个很有意思的问题，为什么不直接在 proxy 的getter和setter中去做Observe要做的事呢？这是因为vuejs还有一个 this.$data 的API，如果在proxy中做了，那么直接使用this.$data.name 就无法触发我们 getter/setter，所以还是得在 this._data 本身上来实现。
我们需要创建一个 Observer 类：
import Dep from './dep.js'
function Observer(value) {
this.value = value
this.dep = new Dep()
// TODO: support Array
this.walk(value)
}
// Instance methods
/**
* Walk through each property and convert them into
* getter/setters. This method should only be called when
* value type is Object.
*
* @param {Object} obj
*/
Observer.prototype.walk = function (obj) {
var keys = Object.keys(obj)
for (var i = 0, l = keys.length; i < l; i++) {
this.convert(keys[i], obj[keys[i]])
}
}
/**
* Convert a property into getter/setter so we can emit
* the events when the property is accessed/changed.
*
* @param {String} key
* @param {*} val
*/
Observer.prototype.convert = function (key, val) {
defineReactive(this.value, key, val)
}
// …
export function observe (value, vm) {
const ob = new Observer(value)
ob.addVm(vm)
return ob
}
/**
* Define a reactive property on an Object.
*
* @param {Object} obj
* @param {String} key
* @param {*} val
*/
export function defineReactive (obj, key, val) {
var dep = new Dep()
//...
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function reactiveGetter () {
var value = getter ? getter.call(obj) : val
if (Dep.target) {
dep.depend()
}
return value
},
set: function reactiveSetter (newVal) {
var value = getter ? getter.call(obj) : val
if (newVal === value) {
return
}
val = newVal
dep.notify()
}
})
}然后我们在 initData 中调用 observer(data) 就可以把 data 变成响应式的。
当执行 this.name =“xxx” 的时候，代码最终会进到 defineReactive 中的 reactiveSetter 中去。
这里的Dep其实是记录了 Observer 和 Watcher 的依赖关系，因为很可能存在多个 watcher 依赖同一个 observer 的情况，所以 Observer 中会创建一个 dep 用来记录到底哪些 watcher 依赖他。
单纯看数据响应化是比较简单的。下一步我们开始讲 Directive 的实现的时候就会比较复杂一些，也会涉及到 Observer 相关的内容。
注意：上面的代码并不是完整的，并且省略了一些比较简单的 （比如 lifecycle.js）代码，完整代码请参阅 tiny-vue