一、数据劫持
vue.js
采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()
来劫持各个属性的setter
、getter
,在数据变动时发布消息给依赖收集器dep
,dep
再通知对应的watcher
观察者触发相应的监听回调函数去更新视图MVVM
作为绑定入口,整合Observer
、Compile
、Watcher
三者,通过Observer
来监听model
数据变化,通过Compile
来解析编译模板指令,最终利用Watcher
搭起Observer
和Compile
之间的通信桥梁,达到数据变化=>视图更新、视图交互变化=>数据model
变更的双向绑定效果
二、构建Vue类
class Vue {
constructor (options) {
this.$el = options.el
this.$data = options.data
this.$options = options
// 当传入的el不为空时才进行相关的后续工作
if(this.$el) {
// 实现指令解析器Compile
new Compile(this.$el, this) // 传入绑定元素以及全局vue实例
// 实现数据观察者Observer
// ....
}
}
}