# 文章目录
# 一、什么是 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算法
。