Vue版本: vue@2.5.10,简单记录自己的学习过程
目录
实现双向绑定的方式区别
脏值检测(angularjs)
这种模式下,使用之只有触发指定的事件进入脏值检测,才会进行双向数据绑定更新,一般是通过预先定义的事件行为触发,这也就是在angularjs中,使用普通的dom操作更改input的内容后,没有办法直接更新model的主要原因.
数据劫持(vue.js)
这种模式下,通过defineProperty()为每个属性在setter/getter添加拦截监听,不论以何种方式(vue预定义事件或者原生操作)变动或获取该属性,均可被监听到.必须注意的是,只有设置了setter/getter拦截的属性才可被监听,这也就是当向component的data根节点插入新的属性时,不会被监听的原因.因为新设置的属性没有设置相应的拦截.
Vue实现数据劫持的方式
了解defineProperty
首先了解Object.defineProperty()方法:defineProperty;
也就是说,object的每一个属性均可设置setter&getter,当数据更新和数据调用时,相应方法会被调用.实现数据劫持的核心思想,就是在可能会变化的Object的每个属性的setter&getter中设置订阅和更新,从而触发相应的watcher事件,实现双向绑定.
Observer/Dep/Watcher三者实现
1. Observer
先看一下源码中如何定义: observer/index.js
1.1. Observer中存在三个属性:
- value:需要观察的数据
- dep:数据订阅和通知watcher的事件处理方
- vmCount:一个计数器
1.2. constructor
constructor (value: any) {
this.value = value //设置属性value
this.dep = new Dep() //设置属性dep
this.vmCount = 0 //设置属性vmCount
def(value, '__ob__', this) //为观察数据添加观察者引用
if (Array.isArray(value)) { //观察数据为Array时的处理方式(observeArray),实现数组每项的观察
const augment = hasProto ? protoAugment : copyAugment
augment(value, arrayMethods, arrayKeys)
this.observeArray(value)
} else { //观察数据为Object时的处理方式(walk),实现每个属性的观察
this.walk(value)
}
}
1.3. 观察数组时的处理方式:observeArray
对每项使用 observe方法为其创建observer.这里的处理方式经过递归,可以与处理object合并
export function observe (value: any, asRootData: ?boolean): Observer | void { ... if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) { ob = value.__ob__ // 如果value已经有对应的observer } else if ( observerState.shouldConvert && !isServerRendering() && (Array.isArray(value) || isPlainObject(value)) && Object.isExtensible(value) && !value._isVue ) { ob = new Observer(value) //用value创建新的observer } ... return ob }
1.4. 观察对象时的处理方式:walk