近期用了一段时间vue3，个人感觉挺方便的，查阅资料结合自身进行一个总结吧。
一、双向数据绑定原理
- Vue 2：使用ES5的
Object.defineProperty() API对数据进行劫持，并结合发布订阅模式来实现双向数据绑定。这种方式只能监听某个属性，不能对整个对象进行监听，且需要遍历属性来添加getter和setter，对于属性较多的对象可能会有一定的性能开销。 - Vue 3：使用ES6的
Proxy API对数据进行代理，可以实现更细粒度的数据监听和控制。Proxy的优势在于可以监听整个对象及其属性的变化，而无需遍历属性，这提升了性能并简化了代码。此外，Proxy还可以监听数组的变化，而Vue 2则需要单独对数组做特异性操作。
二、组件结构
- Vue 2：要求必须有根标签。
- Vue 3：可以没有根标签，Vue 3会默认将多个根标签包裹在一个
Fragment虚拟标签中，这有利于减少内存使用。
三、API类型
- Vue 2：使用选项类型API（Options API），将数据和函数集中起来处理，将功能点切割。当逻辑复杂时，可能不利于代码阅读。
- Vue 3：引入了合成型API（Composition API），允许开发者使用方法来分割组件逻辑。这种方式将同一个功能的代码集中起来处理，使得代码更加有序，有利于代码的书写和维护。
四、定义数据变量和方法
- Vue 2：数据变量定义在
data函数中，方法定义在methods对象中。 - Vue 3：需要使用一个新的
setup()方法来定义响应性数据和方法。setup()方法在组件初始化时触发，并返回一个对象，该对象的属性可以在模板中被访问。在setup()中，通常使用reactive()或ref()来创建响应性数据。
五、生命周期钩子函数
- Vue 2：生命周期钩子函数包括
beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy和destroyed等。 - Vue 3：生命周期钩子函数有所更新，包括
setup（组件开始创建时调用，此时组件实例尚未被创建）、onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount和onUnmounted等。此外，Vue 3还增加了onRenderTracked和onRenderTriggered函数用于调试。需要注意的是，Vue 3中的生命周期钩子函数在调用前需要先进行引入。
六、事件处理和插槽
- 事件处理：在Vue 2和Vue 3中，父组件向子组件传递数据都使用
props，子组件向父组件传递事件都使用事件发射（Emitting Events）。但在Vue 3的setup()方法中，事件发射器emit是通过setup()的第一个参数context对象获取的。 - 插槽：Vue 2和Vue 3都支持匿名插槽和具名插槽，但在作用域插槽的使用方式上有所不同。Vue 2中使用
slot-scope特性从子组件获取数据，而Vue 3则使用#符号（或v-slot:指令）来定义作用域插槽。
七、其他改进和新特性
- 性能优化：Vue 3通过改进虚拟DOM的算法和底层架构，显著提升了渲染速度和内存使用效率。
- TypeScript支持：Vue 3对TypeScript的支持更加完善，代码库已经使用TypeScript重写，并提供了更好的类型推断和类型检查。
- Tree-shaking支持：Vue 3改进了Tree-shaking的支持，可以更好地优化打包大小，只包含使用到的代码。
- 破坏性语法的更新：为了提高性能和开发体验，Vue 3废除了一些不再推荐使用的API，如
Vue.extend和Vue.mixin等。
