day131-vuejs源码-数据绑定-3

前言

在Observer中,有一个walk方法:
在其构造器中,如果observer实例是对象则walk进行绑定
walk方法会遍历对象的每一个属性进行defineReactive绑定
defineReactive的作用则是通过Object.defineProperty
数据定义上getter\setter方法,进行依赖收集后
闭包中的Deps会存放Watcher对象。触发setter改变数据时
会通知Deps订阅者通知所有的Watcher观察者对象进行视图的更新。

代码

/**
* Define a reactive property on an Object.
*/
export function defineReactive (
obj: Object,
key: string,
val: any,
customSetter?: ?Function,
shallow?: boolean
) {
// 闭包Dep
const dep = new Dep()

const property = Object.getOwnPropertyDescriptor(obj, key)
if (property && property.configurable === false) {
return
}
// 如果之前定义过了就取出来
// cater(注:迎合) for pre-defined getter/setters
const getter = property && property.get
const setter = property && property.set
if ((!getter || setter) && arguments.length === 2) {
val = obj[key]
}

let childOb = !shallow && observe(val)
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function reactiveGetter () {
const value = getter ? getter.call(obj) : val
if (Dep.target) {
/* 依赖收集 */
dep.depend()
if (childOb) {
/* 子对象进行依赖收集,其实就是将同一个watcher观察者实例放进了两个depend中,一个是正在本身闭包中的depend,另一个是子元素的depend -- 引 */
childOb.dep.depend()
/* 判断是数组则需要对每一个成员都进行依赖收集,如果数组的成员还是数组,则递归。 */
if (Array.isArray(value)) {
dependArray(value)
}
}
}
return value
},
set: function reactiveSetter (newVal) {
/* 如果原本对象拥有getter方法则执行 */
const value = getter ? getter.call(obj) : val
/* eslint-disable no-self-compare */
if (newVal === value || (newVal !== newVal && value !== value)) {
return
}
/* eslint-enable no-self-compare */
if (process.env.NODE_ENV !== 'production' && customSetter) {
customSetter()
}
// #7981: for accessor properties without setter
if (getter && !setter) return
/* 判断原本对象拥有setter方法,有的话直接执行setter */
if (setter) {
setter.call(obj, newVal)
} else {
val = newVal
}
/* 新值需要重新进行observe,保证数据响应式 */
childOb = !shallow && observe(newVal)
/* 通知观察者 */
dep.notify()
}
})
}
文章作者: lmislm
文章链接: http://lmislm.com/2019/05/23/2019-05-23/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 LMISLMのBlog