【Vue2与Vue3】Composition API与Options API的区别

图片解释

这是Vue2的演示：需要将功能分散在return、methods、computed、watch

这是vue3的演示：功能集中在一个function

在vue3中加入ts+语法糖setup:省略了setup和return之后代码 更加简洁 setup lang="ts"

文字解释

一、代码组织方式

• Options API：

  • 将组件的逻辑分散在多个选项中，如data、methods、computed、watch等。
  • 每个选项都负责一部分逻辑，如data负责状态管理，methods负责方法定义。
  • 随着组件复杂度的增加，代码可能会变得难以理解和维护，因为相关逻辑分散在多个选项中。

• Composition API：

  • 通过setup函数将组件的逻辑集中在一起，使用reactive、ref等函数来定义响应式数据，使用computed、watch等函数来定义计算属性和侦听器。
  • 将逻辑按照功能或相关性进行组织，使得代码更加模块化和可复用。
  • 可以在setup函数中使用普通的JavaScript语法和API，如条件语句、循环等，来处理组件的逻辑。

二、逻辑复用

• Options API：

  • 主要通过mixins或高阶组件（HOCs）来实现逻辑复用。
  • mixins可能会导致命名冲突和数据来源不清晰的问题，高阶组件则可能会增加组件树的复杂度。

• Composition API：

  • 允许将逻辑封装为可复用的函数（如自定义hooks），这些函数可以在不同的组件之间共享和复用。
  • 通过将逻辑抽象为函数，可以更方便地在不同组件之间进行逻辑复用，减少代码的冗余。

三、类型推导

• Options API：

  • 在TypeScript项目中，虽然可以通过类型注解来提高代码的可维护性，但类型推导相对较弱。
  • 开发者需要手动为组件的选项添加类型注解，以确保类型安全。

• Composition API：

  • 提供了更好的类型推导支持，使得开发者可以享受到完整的类型推导功能。
  • 在setup函数中，可以通过参数类型来明确指定响应式数据的类型，从而减少类型错误和调试时间。

四、其他差异

• 生命周期钩子：

Vue2与Vue3生命周期钩子区别详细请看:https://juejin.cn/post/7417737955098312741

• Options API使用如mounted、updated等生命周期钩子。
• Composition API则使用onMounted、onUpdated等函数来替代。

• 响应式系统：

  • 两者都使用了Vue的响应式系统，但Vue 3的响应式系统基于Proxy实现，相比Vue 2的Object.defineProperty更加灵活和强大。

• 性能优化：

  • Vue 3的Composition API可以与Vue 3的其他优化特性（如静态树提升、Fragment组件等）结合使用，提高组件的渲染性能和效率。