数据响应式系统
2021-03-02 14:04:52 0 举报
登录查看完整内容
data,watcher, computed 数据响应式原理流程图
作者其他创作
大纲/内容
Vue 数据响应式原理
依赖收集到 num dep
computed watcher
派发更新
render 函数
this.dirty = true
$watcher
initData
Dep.target
computer watcher
dirty is true?
get 函数
computedGetter
Yes
Observer 类
+ value: any+ dep: Dep+ vmCount: number
+ walk(obj: Object) + observeArray (items: Array<any>)
computed 响应式过程
watcher.depend()
Dep.target.addDep(this)
walk
user watcher
computed watcheruser watcherrender watch
watcher
dep.depend()
watcher.value
watch 定义的执行函数
render watcher
getter 依赖收集
data
observeArray
defineReactive 定义响应式 - 订阅发布模式
遍历 watcher.deps
num
queueWatcher异步队列更新
updateComponent
data: { num: 0 }
Dep
dep.depend 依赖收集
with
sync 为ture同步
No
computedNum
new Watcher
subs[i].update()
Watcher
has data?
$mount
组件初始化
new Observer(value)
setter派发更新
newVal
run
computed Getter 函数
data 数据响应式
return value.__ob__
observe
组件更新
watcher.evaluate()
Dep 类
+ static target: Watcher+ id: number+ subs: Array<Watcher>
+ addSub(sub: Watcher) + removeSub(sub: Watcher)+ depend()+ notify()
vm
递归响应式处理
第二次访问，缓存原理
Dep 类：三个属性和四个方法target: Dep 静态属性，存放当前 Watcher 实例id：dep 实例下标唯一标识subs：存放订阅者addSub：添加一个订阅者，即向subs添加一个WatcherremoveSub：删除一个订阅者，即从subs中移除一个Watcherdepend：收集订阅者notify：发布数据更新
defineReactive
Observer
遍历subs
组件渲染流程
Object.defineProperty
dep.notify 派发更新
valuehas '__ob__' ?
watch 响应式过程
mountCompont
依赖 num
依赖收集
value是否是数组？
dep.addSub(this)
_init
No 空对象
Watcher 类
vm: ComponentexpOrFn: string | Functioncb: Functionoptions: ObjectisRenderWatcher?: boolean
+ get+ addDep (dep: Dep)+ cleanupDeps+ update+ run+ evaluate+ depend+ teardown
执行get函数，访问num
value
initState
0 条评论
回复 删除
下一页
