上一篇我们比较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
中