vue 虚拟DOM快速入门

虚拟 DOM什么是虚拟 domdom 是文档对象模型，以节点树的形式来表现文档。虚拟 dom 不是真正意义上的 dom。正常的 dom 节点在 html 中是这样表示：而在虚拟 dom 中大概是这样：我们可以将虚拟 dom 拆分成两部分进行理解：虚拟 + dom。虚拟 dom 的作用现在主流的框架都是声明式操作 dom 的框架。比较好的想法是：状态改变，只更新与状态相关的 dom 节点。通过对比新旧 vNode，找出差异，然后在现有 dom 的基础上进行修补，从而实现视图更新。另一种情况是 vNode 与 oldVNode 完全不是同一个节点。这时就需要使用 vNode 生成真实的 dom 节点并插入到 oldVNode 指向的真实 dom 节点旁边。删除节点当节点只在 oldVNode 中存在时，直接将其删除即可。但更常见的场景是 vNode 与 oldVNode 是同一个节点。以元素节点为例，如果 vNode 有 tag 属性，则说明是元素节点。