AI
推荐
模板社区
专题
登录
免费注册
首页
流程图
详情
vue 虚拟节点diff过程
2021-03-05 16:42:23
5
举报
分享方式
免费使用
vue 虚拟节点diff过程
工作流程
模版推荐
作者其他创作
大纲/内容
那就将这个dom变成虚拟节点
跟传入进来的参数二是不是同一个节点
是同一个节点
如果经过上面四轮的比较如果还有没有匹配的项
进行精细化比较
文本节点跟旧的节点的文本是不是一样
暴力删除旧的节点，插入新的节点
插入项要插入到新后+1指向的那个项的前面newCh[newEndIndex + 1].elm;
不是
是虚拟节点
（如果是新后旧前命中，那么旧要移动节点，将旧前指向的项移动到旧后之后
是
新老节点都有children，此时旧要进行diff算法进行子节点更新操作：diff算法提供四种命中方式：1、新前与旧前比较2、新后与旧后比较3、新后与旧前比较4、新前与旧后比较
否
如果是旧节点先循环完毕，就说明有新的节点要插入项
删除是删除旧前跟旧后之间的所有项
如果是新前旧后命中，那么就要移动节点，移动旧后指向的这个节点到旧前指向节点的前面
调用patch函数
判断一下第一个参数是不是虚拟节点
旧的节点是否有文本节点
将旧节点中的文本清空，然后将新的节点添加到到DOM节点中
什么都不做
新的节点是不是有文本节点
将新节点的文本innerText到dom节点中
如果是新的节点先循环完毕，就说明旧的节点有要删除的项
不是同一个节点
收藏
立即使用
vue 虚拟节点diff过程
ynt
职业：暂无
去主页
Collect
Get Started
vue的diff算法
Collect
Get Started
导出导入节点
Collect
Get Started
Vue学习笔记——从入门到实战
Collect
Get Started
目录节点编辑
评论
0
条评论
下一页
Document
