vue异步更新流程
2024-02-21 11:43:39 0 举报AI智能生成
VUE VUEX VUE异步更新
作者其他创作
大纲/内容
core/observer/index.js defineReactive() obj的key响应式拦截(也就是数据变更引起的操作)
src/core/observer/dep.js dep.notify() 遍历内部所有的watcher
src/core/observer/watcher.js watcher.update() 执行入队操作
src/core/observer/watcher.js queueWatcher(this) 把watcher加入队列中，然后执行nextTick()方法
src/core/util/next-tick.js nextTick(flushSchedulerQueue)
如果直接调用$nextTick(callback), 就不会加入到flushSchedulerQueue，
那就不会执行 updateComponent方法了
如果直接调用$nextTick(callback), 就不会加入到flushSchedulerQueue，
那就不会执行 updateComponent方法了
src/core/util/next-tick.js timeFunc()
将flushCallbacks放进微任务队列中，并执行flushcallbacks方法,
也就是 flushScheduleQueue()
将flushCallbacks放进微任务队列中，并执行flushcallbacks方法,
也就是 flushScheduleQueue()
flushSchedulerQueues()
主要做的操作就是watcher.run()
run方法才是真正的 视图开始更新方法
主要做的操作就是watcher.run()
run方法才是真正的 视图开始更新方法
src/core/observer/watcher.js run()
如果get方法存在的话，就执行get方法，
get方法主要做了两件事
1. pushTarget() 将watcher赋值给Dep.target
2. this.getter方法执行
如果get方法存在的话，就执行get方法，
get方法主要做了两件事
1. pushTarget() 将watcher赋值给Dep.target
2. this.getter方法执行
Vue初始化时的挂载函数
$mount()实际就是mountComponet函数执行后
src/core/instance/lifecycle.js mountComponent()
挂载函数执行方法，主要工作就是用来updateComponent
挂载函数执行方法，主要工作就是用来updateComponent
updateComponent()方法主要是做了以下几点
1. 先render()=>vnode(虚拟DOM)
2. vnode=>update()=> vnode=>node
1. 先render()=>vnode(虚拟DOM)
2. vnode=>update()=> vnode=>node
0 条评论
下一页
