Vue原理-虚拟DOM和diff算法

Posted 2021-09-08 火腿肠烧烤大赛冠军

vdom和diff

vdom

js模拟DOM

diff算法

diff算法概述

比较方式：

diff源码解读

1. 处理DOM

2. 返回vnode（包含老dom）
   

3. patch函数

path

如果是空的就创建一个新的再关联一下

如果tag和key都相同则这层不做比较：（都不传key也是相等的undefined）

不同直接删除重建：

pathVnode

设置生命周期通Vue：
同时设置新elm为旧的elm（告诉它该和谁比对）

判断时children还是test：

text对比：

有子节点时的对比：

都有时对比children：

updateChildren

二者子节点：

定义方式：

开始和开始结束和结束对比：对比条件为key和tag是否相同

开始和结束对标，结束和开始对比：

**比对后不一样拿当前新节点key和所有其他的key做对比，看是否相同
对应上了判断tag是否一样 否则直接插入新节点

之后指针进行累加：碰到一块则循环结束

不使用key和使用key（随机数也不可以）

用key可以直接做一个移动就好不用删掉重新插入