工作中项目多为vue2，最近开始着手vue3的项目，了解记录下他们的一些区别。
根节点
vue2中必须要有根节点。
vue3中可以没有根节点，会默认将多个根节点包裹在一个fragement虚拟标签中，有利于减少内存。
合式API和选项式API
vue2采用选项式API，将数据和函数集中起来处理，将功能点切割了当逻辑复杂的时候不利于代码阅读。
vue3采用组合式API，将同一个功能的代码集中起来处理，使得代码更加有序，有利于代码的书写和维护。
生命周期的变化
- 创建前：beforeCreate -> 使用setup()
- 创建后：created -> 使用setup()
- 挂载前：beforeMount -> onBeforeMount
- 挂载后：mounted -> onMounted
- 更新前：beforeUpdate -> onBeforeUpdate
- 更新后：updated -> onUpdated
- 销毁前：beforeDestroy -> onBeforeUnmount
- 销毁后：destroyed -> onUnmounted
- 异常捕获：errorCaptured -> onErrorCaptured
- 被激活：onActivated 被包含在 keep-alive 中的组件，会多出两个生命周期钩子函数。被激活时执行。
- 切换：onDeactivated 比如从 A 组件，切换到 B 组件，A 组件消失时执行 我们通常会用onMounted钩子在组件挂载后发送异步请求，获取数据并更新组件状态。因为onMounted钩子在组件挂载到DOM后调用，而发送异步请求通常需要确保组件已经挂载，以便正确地操作DOM或者更新组件的状态。
v-if和v-for的优先级
vue2中v-for的优先级高于v-if，可以放在一起使用，但是不建议这么做，会带来性能上的浪费 vue3中v-if的优先级高于v-for，一起使用会报错。可以通过在外部添加一个标签，将v-for移到外层
diff算法
vue2 diff算法
遍历每一个虚拟节点，进行虚拟节点对比，并返回一个patch对象，用来存储两个节点不同的地方。 用patch记录的消息去更新dom 缺点：比较每一个节点，而对于一些不参与更新的元素，进行比较是有点消耗性能的。 特点：特别要提一下Vue的patch是即时的，并不是打包所有修改最后一起操作DOM，也就是在vue中边记录边更新。（React则是将更新放入队列后集中处理）。
vue3 diff算法
在初始化的时候会给每一个虚拟节点添加一个patchFlags，是一种优化的标识。 只会比较patchFlags发生变化的节点，进行识图更新。而对于patchFlags没有变化的元素作静态标记，在渲染的时候直接复用。
响应式原理
vue2 响应式原理
vue2通过Object.definedProperty()的get()和set()来做数据劫持、结合和发布订阅者模式来实现，Object.definedProperty()会遍历每一个属性。
vue3 响应式原理
vue3通过proxy代理的方式实现。 proxy的优势：不需要像Object.definedProperty()的那样遍历每一个属性，有一定的性能提升proxy可以理解为在目标对象之前架设一层“拦截”，外界对该对象的访问都必须通过这一层拦截。这个拦截可以对外界的访问进行过滤和改写。当属性过多的时候利用Object.definedProperty()要通过遍历的方式监听每一个属性。利用proxy则不需要遍历，会自动监听所有属性，有利于性能的提升
简述
- 渲染更快
Vue3 相比 Vue2 来说，Vue3 重写了虚拟Dom编译模板的优化，更高效的组件初始化。
- 体积更小
Vue3 的运行时核心相比 Vue2 更小，打包体积更小，减少了前端加载时间。Vue3 代码更容易被 Tree-shaking 优化，可以更好地剔除不需要的代码。
- TypeScript 支持更好
Vue3 的代码库已经全面采用 TypeScript 重写，提供了更好的类型推断和类型提示。提供了更多的内置类型声明，使得开发时更容易发现代码错误和调试。
- 合式API更灵活
Vue 3 引入了组合式 API，使得组件的逻辑可以更好地组织和复用。组合式 API 提供了更直观、更灵活的方式来组织组件代码，使得代码更易读、易维护。
- 响应式更好
Vue3 使用了 Proxy 来重写响应式系统，相比 Vue2 的 Object.defineProperty，更优且更强。在 Vue3 中，可以更深层次更准确地监听数据变化。
