八小时实现迷你版vuejs三 vuejs架构

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

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

构造函数 和 初始化

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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实例的时候是这样的:

1
2
3
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 中的主要代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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 类:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
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其实是记录了 ObserverWatcher 的依赖关系,因为很可能存在多个 watcher 依赖同一个 observer 的情况,所以 Observer 中会创建一个 dep 用来记录到底哪些 watcher 依赖他。

单纯看数据响应化是比较简单的。下一步我们开始讲 Directive 的实现的时候就会比较复杂一些,也会涉及到 Observer 相关的内容。

注意:上面的代码并不是完整的,并且省略了一些比较简单的 (比如 lifecycle.js)代码,完整代码请参阅 tiny-vue