Vue 3 和 Vue 2 之间的差异

Vue 3 和 Vue 2 之间的 API 差异主要体现在以下几个方面： 

1. Composition API:

   • Vue 3 引入了 Composition API，它允许开发者更灵活地组织组件逻辑。setup() 函数是Composition API的入口点，在这里可以使用 ref, reactive, toRefs, watch, watchEffect 等函数来声明响应式数据和副作用。
   • 相比之下，Vue 2 使用 Options API，所有的配置项（如 data, methods, computed, 生命周期钩子等）都放在一个对象中。

2. 响应式系统:

   • Vue 3 采用了 Proxy 对象来实现响应式，而 Vue 2 使用 Object.defineProperty。Vue 3 的响应式系统更强大，可以检测到对象属性的添加和删除，以及数组的变化（如 push, pop, shift, unshift, splice, sort, reverse）。

3. 生命周期钩子:

   • Vue 3 的生命周期钩子有所调整，beforeCreate 和 created 被 setup 替代，beforeDestroy 和 destroyed 分别变为 beforeUnmount 和 unmounted。setup 函数在实例创建之后，但在挂载之前调用，允许在这个阶段进行数据初始化和响应式声明。

4. 模板语法:

   • 虽然基本模板语法保持一致，但 Vue 3 支持模板中使用 TypeScript 泛型，以及更复杂的条件和循环结构。

5. 渲染函数:

   • Vue 3 的 render 函数现在支持 TypeScript 类型检查，同时引入了 Teleport，允许将内容渲染到文档的其他位置。

6. 全局 API:

   • Vue 3 尝试减少全局污染，鼓励使用 createApp 创建应用实例，而不是 Vue 2 中的 new Vue。许多全局 API 如 Vue.component 现在变成了 app.component，并且不再有 Vue.extend。

7. 插件兼容性:

   • Vue 3 插件可能需要更新以兼容新的 API，因为它们无法直接在 Vue.prototype 上挂载方法。

8. 性能提升:

   • Vue 3 的体积更小，启动更快，性能也有所提升，特别是对于大型应用。

9. 错误处理:

   • Vue 3 引入了异常边界（Error Boundary）的概念，类似于 React，用于捕获和处理组件内部的错误。

10. Suspense 组件:

    • Vue 3 添加了 Suspense 组件，用于在组件渲染完成前显示占位符或加载指示器。

这些变化旨在提高开发效率，提升应用程序的性能和可维护性，同时也为未来的功能扩展打下了基础。