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)font color=\"#c41230\
src/core/util/next-tick.js font color=\"#381e11\
flushSchedulerQueues()主要做的操作就是watcher.run()run方法才是真正的 视图开始更新方法
src/core/observer/watcher.js run() 如果get方法存在的话,就执行get方法,get方法主要做了两件事1. pushTarget() 将watcher赋值给Dep.target2. this.getter方法执行
$mount()实际就是mountComponet函数执行后
src/core/instance/lifecycle.js mountComponent() 挂载函数执行方法,主要工作就是用来updateComponent
updateComponent()方法主要是做了以下几点1. 先render()=>vnode(虚拟DOM)2. vnode=>update()=> vnode=>node
Vue初始化时的挂载函数
vue异步更新流程
0 条评论
回复 删除
下一页