【vue高频面试题】第6题：Vue3 中 Composition API 和 Options API 有什么区别？为什么 Composition API 更推荐

问：Vue3 中 Composition API 和 Options API 有什么区别？为什么 Composition API 更推荐？

一、标准回答（面试官期望你说到的点）

1）代码组织方式不同

Options API

按选项组织（data、methods、computed、watch...），逻辑分散。

javascript 复制代码

export default {
  data() { return { count: 0 }},
  methods: { add() { this.count++ }},
  watch: { count() {} }
}

Composition API

按业务逻辑组织（功能函数 + 组合逻辑），逻辑集中。

xml 复制代码

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

const count = ref(0)
function add() { count.value++ }
</script>

结论：Composition API 更适合大项目、复杂逻辑复用。

2）逻辑复用方式不同

Options API

依赖 mixins，但有问题：

变量来源不清晰（冲突）
多个 mixin 很容易不知道数据从哪里来

Composition API

复用逻辑靠 Composable（封装函数）

javascript 复制代码

// useCounter.js
export function useCounter() {
  const count = ref(0)
  const inc = () => count.value++
  return { count, inc }
}

业务代码变得更清晰。

3）类型支持更好（TS 体验）

Composition API 是天然为 TypeScript 设计的，

Options API 兼容不友好。

4）Tree-shaking 能力更强

Composition API 使用纯函数 + ES 模块

→ 未用到的代码可以被摇树优化

→ 构建体积更小（Vue3 最初的核心目的之一）

5）可读性在大型项目更好

跨功能逻辑可以集中写在一起，避免 Options API 的"跳来跳去看逻辑"。

二、适用场景对比（面试官喜欢问）

场景	优选
小项目/简单逻辑	Options API
大型项目/多人协作	Composition API
需要高度抽象复用	Composition API
新项目	Composition API
Typescript 项目	Composition API

三、典型代码对比（快速理解差异）

Options API（逻辑分散）

xml 复制代码

<script>
export default {
  data() {
    return { count: 0 }
  },
  methods: {
    add() {
      this.count++
    }
  }
}
</script>

Composition API（逻辑聚合）

xml 复制代码

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

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

四、深挖追问（面试官必问）

追问 1：Composition API 有没有缺点？

有：

初学者写法自由，容易写出失控代码
可读性在小项目不如 Options API
所有变量都暴露给 template，可能混乱

会回答缺点 = 加分。

追问 2：Composition API 会不会导致组件逻辑过大？

会，所以必须拆成 Composable 函数：

javascript 复制代码

// useUser.js
export function useUser() {
  const user = ref(null)
  const loadUser = () => {}
  return { user, loadUser }
}

结构化拆分是 Composition API 的核心价值。

追问 3：Options API 会被废弃吗？

不会。

Vue 官方声明 永远支持 Options API。

追问 4：Composition API 和 setup 写法的生命周期怎么记？

Options API	Composition API（setup）
created	(setup 中执行)
mounted	onMounted
updated	onUpdated
unmounted	onUnmounted
beforeMount	onBeforeMount
beforeUpdate	onBeforeUpdate
beforeUnmount	onBeforeUnmount

这是面试必考点。

追问 5：Composition API 是否一定性能更好？

不一定。

二者性能几乎相同，主要差异在可维护性。

五、killer 问题（高分回答必杀技）

❓ 为什么 Vue3 推 Composition API，而不是继续强化 Options API？

可以这么回答（非常加分）：

Vue3 的目标之一是解决组件逻辑分散、复用困难的问题。

Options API 天生分散（data/methods/watch 分开），工程复杂后难维护。

Composition API 将逻辑聚合到函数中，更适合大型工程、跨项目复用、TypeScript 支持、Tree-shaking 优化。

所以 Vue3 并不是"替换 Options API"，而是"补足 Vue2 的长痛点"。

六、最终总结（1 分钟背诵版）

Composition API 更灵活、更可复用、更支持 TS、更利于代码组织。
Options API 逻辑分散、复用困难，更适合小项目。
Vue3 推荐 Composition API，但官方保证 Options API 不会废弃。