# 文章目录
# 一、什么是 vnode?
VNode 的全称是 Virtual Node，也就是虚拟节点(一个节点)
事实上，无论是组件还是元素，它们最终在 Vue 中表示出来的都是一个个 VNode
VNode 的本质是一个 JavaScript 的对象;
<div class="title" style="font-size:30px;color:res">
哈哈哈
</div>
1
2
3
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 算法如下（三)
