首页  思维导图  详情

Vue源码02

2020-10-13 18:16:40   3  举报





AI智能生成

vue虚拟dom和patch算法

vue

源码分析

虚拟dom

patch

作者其他创作

大纲/内容

异步更新

dep.notify()
通知更新

watcher.update()
入队请求

queueWatcher()
入队、去重启动异步任务

nextTick()
添加、调用异步任务

timerFunc()
异步执行队列刷新工作

watcher.run()
真正执行更新操作

虚拟DOM

src\core\observer\watcher.js
执行更新：watcher.run()

src\core\instance\lifecycle.js
组件更新：updateComponent()

src\core\instance\render.js
计算虚拟dom：_render()

src\core\instance\lifecycle.js
更新：_update()，转换vnode为dom

src\core\vdom\patch.js
打补丁：patch()，转换实际执行函数，patching，diff

树级别比较 patch()

不存在新vnode：删

不存在老vnode：增

都存在：改
这里是diff发生的地方

递归的更新节点 patchVnode()

新旧vnode均有文本且不同，文本更新

属性更新

新旧vnode均有孩子
重排updateChildren()

重排整体策略：
首先假设新旧children首尾有相同，相同则直接patch它们；
若没有，则从旧children中查找跟新children中首个节点相同的节点，找到patch它们，找不到创建；
若先遍历完新旧其中一个children，循环结束，开始收尾工作：新children先结束，老children中剩下的批量删除；老children先结束，新children中剩余的批量增加

首尾两两比对过程

在旧children中查找相同节点过程

循环结束的收尾工作

只有新vnode有children，新增

只有老vnode有children，删除它们

只有老节点有文本，清空文本

节点创建createElm()

自定义组件创建createComponent

保留节点创建