Vue源码02

Vue源码

异步更新

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\ender.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

保留节点创建