Vue生命周期流程图（含diff算法）
2021-01-18 09:48:54 0 举报Vue生命周期流程图（含diff算法）
作者其他创作
大纲/内容
是
运行时版本没有模板编译器
是不是和oldVnode的文本内容一样？
销毁子组件（调用子组件的$destroy）
循环比较四判定：① 旧前与新前② 旧后与新后③ 旧前与新后④ 旧后与新前
oldVnode和newVnode在内存中是不是同一个对象？
条件不成立循环结束
相等
over
当调用了$mount(el)
beforeCreate
调用渲染函数生成虚拟节点，并挂载到_vnode上
是否有template或者$el?
$el = el
存在
mounted
什么都不做
新前节点补丁更新该节点然后把该节点插入到旧前前把oldVnode.children该节点所在的索引的元素标记为undefined，意为已处理完该索引的节点，循环遇到值为undefined时，则可以直接跳过新前索引++新前节点重新赋值
tag === undefined
是否有$el?
updated
从父组件（如果有）的$children中移除、移除侦听器、数据劫持
④ 旧后与新前
不相等
将oldVnode.children中剩余的节点删除
否
旧后是否为undefined?
是否有render?
报出警告
新后节点补丁更新旧前节点然后把旧前插入到旧后后旧前索引++旧前节点重新赋值新后索引--新后节点重新赋值
不是
有
新后节点补丁更新旧后节点旧后索引--旧后节点重新赋值新后索引--新后节点重新赋值
beforeUpdate
重新render出vnode
关闭Vue的事件监听，释放相关引用
没有
新前节点插入到旧前前新前索引++新前节点重新赋值
是否只包含运行时版本?
beforeMount
③ 旧前与新后
当调用$destory
将模板编译成渲染函数
不存在
新前节点补丁更新旧后节点然后把旧后插入到旧前前旧后索引--旧后节点重新赋值新前索引++新前节点重新赋值
新前索引 > 新后索引&&旧前索引 <= 旧后索引？
将el元素作为模板
没有（那就是有$el）
① 旧前与新前
初始化生命周期、事件、渲染的相关代码
是（说明newVnode.children里面还有新节点要添加）
插入新的，删除旧的
新前节点补丁更新旧前节点旧前索引 ++旧前节点重新赋值新前索引++新前节点重新赋值
destroyed
循环条件：旧前索引 <= 旧后索引 && 新前索引 <= 新后索引
旧前索引 --旧前节点重新赋值
用真实的DOM替换挂载点容器
将oldVnode的文本替换为newVnode的文本
初始化注入、状态、提供者相关的代码
旧前索引 ++旧前节点重新赋值
oldVnode和newVnode是不是相同的节点？
将newVnode.children中剩余的节点依次添加到新后的后一个节点前
是（说明oldVnode.children里面还有节点要删除）
旧前索引 > 旧后索引&&新前索引 <= 新后索引？
当检测到数据变化
② 旧后与新后
beforeDestory
oldVnode.children中是否存在和新前节点相同的节点？
条件成立
创建真实DOM，挂载到实例$el上
旧前是否为undefined?
有beforeMount
newVnode是不是文本节点？
new Vue({ ... })
Vue生命周期流程图（含diff算法）
created
是否有template?
key相等 && tag相等
收藏
职业：暂无
0 条评论
下一页
