Vue3 的 Composition API 和 Options API 有哪些区别？举例说明 Composition API 的优势。

一、两者的定义与核心思想

项目	Options API（Vue2 传统写法）	Composition API（Vue3 新写法）
核心理念	按"选项类型"组织代码（data、methods、computed、watch 分区）	按"功能逻辑"组织代码（逻辑聚合、函数复用）
写法形式	export default { data(){}, methods:{}, computed:{}}	使用 setup() 函数，通过 ref、reactive、computed、watch 等组合逻辑
学习曲线	简单直观，适合小项目	初期略复杂，但在大型项目中更清晰
代码组织	分散：相关逻辑被拆在不同选项中	聚合：相关逻辑可以集中在一起
逻辑复用	依赖 mixins（有命名冲突、来源不明等问题）	可通过自定义 hook 函数（组合式函数）灵活复用
this 指向	自动绑定组件实例	没有 this，直接使用定义的变量
Tree-shaking	不支持（Vue 全量引入）	支持按需引入，构建更小
类型支持	TypeScript 兼容较弱	天然支持 TypeScript 类型推导

二、示例对比

🧩 1. Options API 写法（Vue2 风格）

javascript 复制代码

export default {
  data() {
    return {
      count: 0
    }
  },
  computed: {
    double() {
      return this.count * 2
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}

🧠 2. Composition API 写法（Vue3 新写法）

javascript 复制代码

import { ref, computed } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const double = computed(() => count.value * 2)
    const increment = () => count.value++

    return { count, double, increment }
  }
}

👉 可以看到：

Composition API 直接通过函数式 API 操作数据；
不依赖 this；
所有逻辑在 setup() 内部集中定义，更易于组合与抽离。

三、Composition API 的优势详解

1️⃣ 逻辑聚合（Logic Composition）

在 Options API 中，一个功能逻辑往往被拆散在不同区域：

javascript 复制代码

// 例子：获取用户数据 + 监听窗口大小
export default {
  data() {
    return { user: null, width: window.innerWidth }
  },
  created() {
    this.fetchUser()
  },
  methods: {
    fetchUser() { ... }
  },
  mounted() {
    window.addEventListener('resize', this.updateWidth)
  },
  beforeUnmount() {
    window.removeEventListener('resize', this.updateWidth)
  }
}

这些逻辑"功能上是相关的"，但在代码中被"结构上拆散"。

Composition API 能让它们聚合在一起：

javascript 复制代码

import { ref, onMounted, onUnmounted } from 'vue'

export default {
  setup() {
    const user = ref(null)
    const width = ref(window.innerWidth)

    const fetchUser = async () => { ... }

    const updateWidth = () => { width.value = window.innerWidth }

    onMounted(() => {
      fetchUser()
      window.addEventListener('resize', updateWidth)
    })
    onUnmounted(() => window.removeEventListener('resize', updateWidth))

    return { user, width }
  }
}

这样：

逻辑更聚合；
生命周期与逻辑操作更接近；
更容易维护和阅读。

2️⃣ 逻辑复用更强（Hooks）

Vue2 时代逻辑复用主要靠 Mixins，但存在：

命名冲突；
来源不明；
数据来源不清晰；
逻辑难追踪。

而 Composition API 允许我们像 React Hooks 一样封装复用逻辑：

javascript 复制代码

// useMouse.js
import { ref, onMounted, onUnmounted } from 'vue'

export function useMouse() {
  const x = ref(0)
  const y = ref(0)
  const update = e => {
    x.value = e.pageX
    y.value = e.pageY
  }
  onMounted(() => window.addEventListener('mousemove', update))
  onUnmounted(() => window.removeEventListener('mousemove', update))
  return { x, y }
}

在组件中直接使用：

javascript 复制代码

import { useMouse } from './useMouse'

export default {
  setup() {
    const { x, y } = useMouse()
    return { x, y }
  }
}

👉 逻辑抽离清晰，复用简单，完全无副作用。

3️⃣ 更好的 TypeScript 支持

在 Composition API 中：

ref、reactive 都有完善的类型推导；
不需要再声明 this 的类型；
返回值直接由 IDE 自动提示类型。

4️⃣ 性能和编译优化

Vue3 使用了 基于模板编译优化的响应性追踪；
Composition API 的函数式结构更容易被编译器分析；
结合 Tree-shaking 可减小包体积。

四、何时用哪种 API？

场景	推荐 API
小型项目 / 初学者	Options API（结构直观）
大型项目 / 复杂逻辑	Composition API（逻辑更清晰，可复用）
需要逻辑抽离或插件开发	Composition API
需要 TypeScript 支持	Composition API

五、总结一句话

Options API：结构化、上手快，但逻辑分散。
Composition API：函数化、模块化，逻辑聚合、复用强，是 Vue3 的未来方向。