vue 依赖搜集流程
2022-04-11 15:08:18 47 举报vue依赖收集流程图
作者其他创作
大纲/内容
removeSub移除watch
this.getter （传入的updateComponent方法也就是 vm._render->vm._update）
new Vue
run
Dep.target 存在时收集依赖dep.depend() -> watch.addDep
update
不含有 lazy ，sync 修饰符时调用
flushSchedulerQueue设置 flushing 为真watcher.before 存在，也即 组件有添加 beforeUpdate生命周期 就直接调用队列循环调用 watcher.run()resetSchedulerState 重置参数callUpdatedHooks 批量调用 组件的 updated 生命周期
方 法
生命周期Mounted
addSub添加watch
watch 的 get 方法
mountComponent
------依赖于 render 中收集----------------依赖收集完后-----------
pushTarget设置Dep.target
teardown组建销毁时调用用于 移除 dep 的订阅 与设置 active属性为false
生命周期beforeMount
这个先调用
traverse
getter
walk 将对象转为getter setter
defineReactive1. 设置 dep 属性 用于收集依赖2. 定义getter settergetter时 收集依赖setter 时 触发依赖
initData
调用
render 的时候会获取一遍值 也就会走一遍所有数据的getter
设置值时会触发
Watch 类
pushTarget 设置 Dep.target
popTarget
depend
notify发布更新用于通知watch，触发更新
函数中实例化Watch对象
这个后调用
cleanupDeps在执行 cleanupDeps 函数的时候，会首先遍历 deps，移除对 dep.subs 数组中 Wathcer 的订阅，然后把 newDepIds 和 depIds 交换，newDeps 和 deps 交换，并把 newDepIds 和 newDeps 清空。
vm.$mount
cleanupDeps
queueWatcherwatch去重 ， flushing 为假时 ，将watch添加到queue队列，调用nextTick（ flushSchedulerQueue）进入一次后加锁flushSchedulerQueue 调用时解锁因为 nextTick 为异步， 也即 queue 会收集所有的 watch 然后 一次更新
proxy（设置代理，可以使用this.属性名访问）
initState
observer方法给 对象 添加 __ob__ 属性 ，挂载 Oberver 的实例
addDep（watch）
Oberver 类
popTarget恢复成上一个状态
Dep 类
setter
observeArray
收藏
收藏
0 条评论
下一页
