Vue源码02
2020-10-13 18:16:40 3 举报AI智能生成
vue虚拟dom和patch算法
作者其他创作
大纲/内容
异步更新
dep.notify()<br>通知更新
watcher.update()<br>入队请求
queueWatcher()<br>入队、去重启动异步任务
nextTick()<br>添加、调用异步任务
timerFunc()<br>异步执行队列刷新工作
watcher.run()<br>真正执行更新操作
虚拟DOM
src\core\observer\watcher.js<br>执行更新：watcher.run()<br>
src\core\instance\lifecycle.js<br>组件更新：updateComponent()<br>
src\core\instance\render.js<br>计算虚拟dom：_render()<br>
src\core\instance\lifecycle.js<br>更新：_update()，转换vnode为dom<br>
src\core\vdom\patch.js<br>打补丁：patch()，转换实际执行函数，patching，diff<br>
树级别比较 patch()
不存在新vnode：删
不存在老vnode：增
都存在：改<br>这里是diff发生的地方
递归的更新节点 patchVnode()
新旧vnode均有文本且不同，文本更新
属性更新
新旧vnode均有孩子<br>重排updateChildren()<br>
重排整体策略：<br>首先假设新旧children首尾有相同，相同则直接patch它们；<br>若没有，则从旧children中查找跟新children中首个节点相同的节点，找到patch它们，找不到创建；<br>若先遍历完新旧其中一个children，循环结束，开始收尾工作：新children先结束，老children中剩下的批量删除；老children先结束，新children中剩余的批量增加
首尾两两比对过程
在旧children中查找相同节点过程
循环结束的收尾工作
只有新vnode有children，新增
只有老vnode有children，删除它们
只有老节点有文本，清空文本
节点创建createElm()
自定义组件创建createComponent
保留节点创建
0 条评论
下一页
为你推荐
查看更多
