首页  流程图  详情

数据响应式系统

2021-03-02 14:04:52   0  举报





data,watcher, computed 数据响应式原理流程图

vue

前端开发

作者其他创作

大纲/内容

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同步

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()

递归响应式处理

第二次访问，缓存原理

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是否是数组？