Vnode-Vdom-diff算法

9/5/2021 VueAlgorithm

# 文章目录

# 一、什么是 vnode?

VNode 的全称是 Virtual Node,也就是虚拟节点(一个节点)
事实上,无论是组件还是元素,它们最终在 Vue 中表示出来的都是一个个 VNode
VNode 的本质是一个 JavaScript 的对象;

<div class="title" style="font-size:30px;color:res">
  哈哈哈
</div>
1
2
3

在这里插入图片描述

# 二、什么是虚拟 DOM?

Virutal dom 多个 Vnode 形成的树结构。
如果我们不只是一个简单的 div,而是有一大堆的元素,那么它们应该会形成一个 VNode Tree:
在这里插入图片描述
在这里插入图片描述

# 三、什么是 diff 算法及作用?

举例说明:
有一个数组arr渲染到页面上,arr:
['a', 'b', 'c', 'd']
现在我们在 c 的前面插入一个字母f,即:arr.splice(2,0,'f')
不出意外页面上会多出一个f

那么问题来了,vue 是响应式的,它内部是怎么把f给插入到以前的数组内的呢?

在生成新的数据:Vue内部把新生成的 Vnodes 和旧的 Vnodes对比的这个过程就是 diff算法
在这里插入图片描述

# 3.1 源码中 for 循环时没 Key 的做法

在这里插入图片描述

# 3.2 有 key 的 diff 算法如下(一)

在这里插入图片描述

# 3.3 有 key 的 diff 算法如下(二)

在这里插入图片描述

# 3.4 有 key 的 diff 算法如下(三)

在这里插入图片描述

最后更新于: 2021年9月15日星期三晚上10点10分
Faster Than Light
Andreas Waldetoft / Mia Stegmar