Vue3 组合式API vs 选项式API：深度对比与最佳实践

Hi，我是布兰妮甜 ！Vue 3 引入了组合式API（Composition API）作为对传统选项式API（Options API）的补充和增强，许多开发者对两者之间的差异、适用场景以及如何选择感到困惑。本文将从核心概念、代码风格、优缺点、适用场景及高级用法等方面进行全面对比，帮助你理解何时使用选项式API，何时采用组合式API，并提供实际项目中的最佳实践建议。

一、什么是选项式API（Options API）？

选项式API是Vue 2.x 的主要编程范式，通过定义不同的选项（如 data、methods、computed、watch、lifecycle hooks）来组织代码。

示例代码（Options API）

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  },
  computed: {
    doubleCount() {
      return this.count * 2
    }
  },
  watch: {
    count(newVal) {
      console.log(`Count changed to ${newVal}`)
    }
  },
  mounted() {
    console.log('Component mounted')
  }
}
</script>

特点

• 结构清晰：代码按功能分类（data、methods、computed 等），适合新手理解。
• 逻辑分散但直观：每个选项只关注自己的职责（如 methods 只存放方法）。
• 逻辑复用困难：如果多个组件共享相同逻辑，需要使用 mixins 或 scoped slots，容易导致命名冲突。
• 大组件代码臃肿：随着组件复杂度增加，data、methods 等选项会变得很长，难以维护。

二、什么是组合式API（Composition API）？

组合式API 是 Vue 3 引入的新特性，允许开发者使用 setup() 函数和 响应式API（如 ref、reactive、computed、watch） 来组织代码，使逻辑更灵活、可复用。

示例代码（Composition API）

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref, computed, watch, onMounted } from 'vue'

export default {
  setup() {
    const count = ref(0)

    const increment = () => {
      count.value++
    }

    const doubleCount = computed(() => count.value * 2)

    watch(count, (newVal) => {
      console.log(`Count changed to ${newVal}`)
    })

    onMounted(() => {
      console.log('Component mounted')
    })

    return {
      count,
      increment,
      doubleCount
    }
  }
}
</script>

特点

• 逻辑复用更简单：可以使用 composables（类似 React Hooks）封装逻辑，避免 mixins 的缺点。
• 更好的 TypeScript 支持：变量和函数类型更容易推断。
• 代码组织更灵活：可以按功能（而不是选项）组织代码，提高可维护性。
• 学习曲线稍高：需要理解 ref、reactive、watch 等新概念。
• setup() 函数内代码可能变长：需要合理拆分逻辑，否则可能变得混乱。

三、组合式API vs 选项式API 详细对比

四、何时使用选项式API？何时使用组合式API？

适合使用选项式API的场景

• 小型项目或简单组件
• 团队对 Vue 2 更熟悉，暂时不想迁移
• 需要快速开发，不需要复杂逻辑复用

适合使用组合式API的场景

• 大型项目，需要更好的代码组织
• 需要逻辑复用（如多个组件共享相同逻辑）
• 使用 TypeScript，希望更好的类型推断
• 需要更灵活的状态管理（如结合 Pinia）

五、组合式API 进阶技巧

（1）使用 composables 封装可复用逻辑

// useCounter.js
import { ref, computed } from 'vue'

export function useCounter() {
  const count = ref(0)
  const increment = () => count.value++
  const doubleCount = computed(() => count.value * 2)

  return { count, increment, doubleCount }
}

// 在组件中使用
import { useCounter } from './useCounter'

export default {
  setup() {
    const { count, increment, doubleCount } = useCounter()
    return { count, increment, doubleCount }
  }
}

（2）<script setup> 语法糖（更简洁的写法）

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const count = ref(0)
const increment = () => count.value++
</script>

（3）结合 Pinia（Vue 官方状态管理）

import { useStore } from './store'

export default {
  setup() {
    const store = useStore()
    return { store }
  }
}

总结

Vue 3 的组合式API 和 选项式API 各有优势，选择取决于项目需求和团队习惯。选项式API 适合简单组件和初学者，结构清晰但逻辑复用困难；组合式API 更适合复杂应用，提供更好的逻辑封装、TypeScript 支持和代码组织。对于新项目，推荐尝试组合式API，尤其是需要逻辑复用或使用 TypeScript 的场景；而现有 Vue 2 项目可以逐步迁移。无论选择哪种方式，Vue 3 都提供了灵活的选项，让开发者能够高效构建现代化前端应用。