跳到主要内容

对 Compositon API 的理解

产生原因、优点​

Vue3 的 Composition API 提供了更灵活的代码组合方式，符合组合优于继承的理念

  • 代码组合条理清晰：相关代码组合，在大型项目中逻辑更清晰集中，而 Option API 会比较分散，读代码时需上下跳跃
  • 便于类型推导：IDE 代码提示更友好
  • 不依赖 this 上下文：变量可以被压缩，通过 this 访问的变量就不能被压缩

API​

  • setup 函数
import { setup, ref } from 'vue'
export default {
 setup() {
  const count = ref(0)
  return { count }
 }
}
  • computed
  • 监听
    • watch: 监听指定数据源的变化，并执行回调函数。
      • 适合特定数据监听，对比新旧数据，异步处理，深度监听。
    • watchEffect：自动监听依赖的数据源，并在其发生变化时执行回调函数。
      • 自动收集在回调函数中引用的数据
      • 适合多个数据响应式联动
  • 响应式
    • ref 和 reactive、toRef 和 toRefs
  • 生命周期
    • onBeforeMount
    • onMounted
    • onBeforeUpdate
    • onUpdated
    • onBeforeUnmount
    • onUnmounted
  • 依赖注入
    • provide / inject

对比 Option API​

应用场景：Composition API 不是 Option API 的替代品，是 Vue3 的高阶用法，非必要技术

  • Option API 适合小型项目，逻辑不会太散、学习成本不高。
  • Composition API: 跟 React Hooks 写法像。适合大规模项目，维护性强。

与 Class 关系​

用组合的方式代替类继承，有 CompositionAPI 就不需要 Class 了

标签：