vue2和vue3的区别

原理方面：

1. vue3响应式原理改成了proxy，解决了数组无法通过下标修改，无法监听到对象属性的新增和删除的问题，提升了响应式效率。
2. vue2里是使用了this.set()方法设置新属性，删除则需要this.delete()方法删除属性。
3. vue3也并非全部舍弃了Object.defineProperty,通过reactive定义的响应式数据使用proxy包装出来，而ref还是需要Object.defineProperty去给了一个空对象，定义一个value属性来做响应式。
4. 生命周期增加了组合式API,setup方法。
5. 组合式API的写法下，源码改成了函数式编程，方便按需引入，有些功能是必须分配按需引入的，比如tree-shaking。所以vue3在这方面能让tree-shaking打包会更小。
6. 性能优化，增加了静态节点标记，会标记静态节点，不对静态节点进行对比。
7. vue3不推荐使用mixin进行复用逻辑提取，而是推荐写成hook。
8. v-model应用于组件时，监听的事件和传递的值改变。
9. vue3更加的配合了ts的使用。
10. v-if和v-for的优先级不一样，比如vue2里v-for优先级更高，vue3里v-if优先级更高。
11. vue3新增了一个传送门的组件，Teleport。

  <Teleport to="body">
    需要传送到body下面的内容
  </Teleport>

11.diff算法的不同。
前端diff算法是一种用于比较和更新虚拟DOM（‌Virtual DOM）‌及其对应的真实DOM（‌Real DOM）‌的算法，‌旨在实现高效的页面更新和渲染。‌这种算法的核心思想是通过比较两个文本或数据结构，‌找出它们之间的差异，‌并最小化这些差异。‌Diff算法通常包括以下几个步骤：‌
分割：‌将待比较的文本或数据结构分割成更小的片段，‌例如将文本按行或单词进行分割，‌或将数据结构按节点进行分割。‌
比较：‌逐个比较两个文本或数据结构的片段，‌找出它们之间的差异。‌常用的比较方法有最长公共子序列（‌Longest Common Subsequence）‌算法、‌最长公共子串（‌Longest Common Substring）‌算法等。‌
标记：‌将比较结果标记为插入、‌删除或替换操作。‌通常使用标记符号（‌如+、‌-、‌^）‌或索引来表示不同的操作类型。‌
合并：‌根据标记的操作类型，‌将比较结果合并成最终的差异表示。‌这些差异可用于更新相应的文本或数据结构。‌

Vue2的diff算法是一种用来比较新旧虚拟节点之间差异的算法，其目的是最小化对DOM的重新渲染。Vue2的diff算法采用深度优先的方式遍历虚拟节点树，并采用几种策略进行优化比较。
同层比较：Vue会尝试复用相同层级的元素，如果它们有相同的类型，Vue会进行移动操作而不是删除和创建新的元素。
key属性：有了key，Vue就可以更准确地识别节点的身份，在同一层次之间进行复用和排序。
patching：对于同层级的节点，Vue会在oldVnode和newVnode之间进行差异比较，并应用最小的DOM改动。
对子节点的处理：如果节点类型不同，直接替换整个节点。如果节点类型相同，则进行属性和子节点的比较。

Vue3中的diff算法是一种用于比较虚拟DOM树之间差异的算法，其目的是为了高效地更新真实DOM，减少不必要的重渲染。Vue3采用了一种基于框架层面的优化，如推理树patching、stability optimization等，以此来提高diff的效率。
Vue3的diff算法主要做了以下优化：静态节点标记和追踪：预编译阶段会为静态节点打上标记，在diff过程中可以快速识别并跳过这些节点。
新算法：Vue3采用了基于Key的patching策略，这样可以更好地追踪节点的身份，避免了之前版本中可能的错位问题。
节点类型判断：通过节点类型判断，可以在不同的节点类型间直接进行patch，而不需要比较同一节点类型的不同表示。