DIFF 算法

据–>框架就会操作虚拟 DOM进行计算变更–>之后映射到真实的 DOM上–> 完成视图更新。

当我们说虚拟DOM的优点，我们常说虚拟DOM 提高效率，其实这需要根据场景而言的！当操作 DOM 的数量比较少的时候，使用虚拟DOM 反而效率低，因为添加了更多的计算等操作。而当操作大量 DOM 的时候，使用虚拟

DOM 会将多次操作合并为一次更新，减少 JavaScript 操作真实 DOM 的带来的性能消耗。另外一个重要的优点是虚拟 DOM 抽象了原本的渲染过程，实现了跨平台，跨端的能力！不再局限于浏览器！

DIFF 算法

DIFF算法的作用：同层树节点比较的算法

那么 DIFF算法是如何工作的？

一、首先是先计算新老DOM的最小变化

该算法会先遍历一遍老的DOM，然后在遍历新的DOM，最后会判断是改变/新增/删除来重新排序。

这样无疑是非常耗费计算的，我们看一看出总共遍历了三回，如果有一千个节点，那么就湖发生了十亿次的计算。

二、diff算法的优化 diff 算法的优化，也就是这个算法的核心部分了，简单来说就是针对具有相同父节点的同层新旧子节点进行比较，

不相同的话就会新增或者删除，而不是使用逐层搜索递归遍历的方式。时间复杂度为O(n)。

1. 只比较同一层级，不跨级比较
2. 标签不同，直接删除，不继续比较
3. 标签名相同，key相同，就认为是相同节点，不继续深度比较

Vue3

Vue3 Composition API和Vue2 Options API有什么不同

1. 代码组织形式

Vue2使用data、methods、computed等选项将相关功能组织在一起。当组件变得复杂，对应属性的列表会变得很长，且分布在不同的选项中，导致代码难以阅读。

Vue3可以根据逻辑功能来组织代码，将一个功能定义的API都放在一起。

1. 逻辑复用

Vue2逻辑复用通常需要使用混入（mixins）或者通过全局函数的方式，这会导致命名冲突以及数据来源不明确的问题。

Vue3通过函数的方式将逻辑组合在一起，使用setup函数可以更灵活地实现逻辑复用。

1. 响应式

Vue2使用this关键字来访问组件实例，通过this.$data来访问响应式数据。

Vue3 使用ref、reactive等函数来创建响应式数据。

1. Ts支持

Vue2 支持存在TypeScript，但可能需要额外的配置和类型声明。