diff算法

Virtual-DOM

节点：

• type：bian qiabianqia

• props：

• children：

核心点：

• 节点只在同层对比

• 新旧虚拟DOM采用双指针标记，节点对比顺序：头头对比、尾尾对比、头尾对比、尾头对比

• 节点相同的判断条件：key相同 && tag相同（data？） && 不是注释节点

• diff过程边对比边操作真实DOM

• 操作DOM的类型：增加节点、删除节点、更新节点

面试题：分别说下用index作为key和使用其他唯一id做为key的diff过程

oldVnode：A B C
newVnode：A D B C

v-for时使用数组的index作为key时的问题：

• diff效率低

• 数据错位：演示

参考：

• https://vue3js.cn/interview/vue/diff.html
• https://www.cnblogs.com/yingzi1028/p/16647253.html