文章目录
- 一、什么是 vnode?
- 二、什么是虚拟DOM?
- 三、什么是diff算法及作用？
-
- 3.1 源码中for循环时没Key的做法
- 3.2 有key的diff算法如下（一)
- 3.3 有key的diff算法如下（二）
- 3.4 有key的diff算法如下（三)
一、什么是 vnode?
VNode的全称是Virtual Node，也就是虚拟节点(一个节点)
事实上，无论是组件还是元素，它们最终在Vue中表示出来的都是一个个VNode
VNode的本质是一个JavaScript的对象;
二、什么是虚拟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算法如下（三)