Vue3双向绑定原理
2021-09-23 21:43:01 2 举报
登录查看完整内容
Vue3双向绑定原理分析图
作者其他创作
大纲/内容
是否collection
trackEffects
根据lazy或者options决定需要立即执行fn与否，这里和computed有关系
放入dep set数据结构进行关联
通过target和key找到对应dep1
targetMap是weakmap，depsMap是Map，dep是set类型，track会结合当前target加上key创建对应的dep，并且将dep放到depMaps，然后存放到targetMap供trigger使用
watchEffect
ReactiveEffect
collectionHandler
reactive
proxy代理
track
triggerEffects
dep2
depsMap1
一些校验不符合直接返回不代理
validate
dep1
scheduler
deps
baseHandler
创建ReactiveEffect对象
triggerEffects会触发ReactiveEffect上面的scheduler或者fn进行视图更新或者触发回调函数
depsMap2
通过不同更新类型操作后将dep1放入deps数组用于后续更新使用
是
一个异步任务，用来排队更新视图
否
fn
effect
主要正对数组和集合类型更新的一些操作
targetMap
computed
trigger
componentUpdateFn或者watchEffect回调
renturn代理后的对象
收藏
收藏
0 条评论
回复 删除
下一页
