虚拟DOM:
虚拟DOM是Vue的核心概念之一。在Vue中,当组件渲染时,它创建的不是真实的DOM节点,而是一个临时的、轻量级的JavaScript对象,我们称之为虚拟节点或VNode。这个VNode在内存中表示了真实的DOM节点应该是什么样子的。当数据改变时,Vue会创建新的VNode,然后与旧的VNode进行对比。
diff算法:
Vue使用了一种称为“深度优先遍历”的算法来比较两个VNode树。这个算法会遍历每个树的节点,并比较它们的属性和子节点。如果两个节点是相同的类型(例如都是元素节点),那么算法会继续比较它们的属性和子节点。如果它们是不同类型的(例如一个是元素节点,另一个是文本节点),那么算法会知道需要创建一个新的节点并替换旧的节点。
Vue的diff算法还有一个优化:它只比较两个节点的子节点,而不是整个子树。这意味着如果一个节点的子节点改变,Vue只会比较和更新那个子节点,而不是整个子树。这种优化可以减少不必要的DOM操作,提高性能。