【前端__VUE面试题__Vue3 的 Composition API 和 Vue2 的 Options API】-优快云博客

本文链接：https://blog.youkuaiyun.com/Code_Song_123/article/details/145503705

Vue3 的 Composition API 和 Vue2 的 Options API 在设计理念和代码组织方式上有显著差异，主要体现在以下几个方面：

在逻辑组织和逻辑复用方面:Composition API是优于:0ptions API
因为:Composition API!几乎是函数，会有更好的类型推断，
Composition API 对:tree-shaking:友好，代码也更容易压缩
Composition API中见不到:this 的使用，减少了:this 指向不明的情况
如果是小型组件，可以继续使用:0ptionsAPI:，也是十分友好的

对比表

特性	Options API	Composition API
代码组织	按选项类型分割	按逻辑功能聚合
逻辑复用	Mixins（易冲突）	自定义函数（高内聚）
TypeScript 支持	较弱	强
响应式控制	隐式	显式（ref/reactive）
生命周期管理	选项式声明	函数式调用
适用场景	简单组件	复杂组件或大型项目

核心优势

Composition API 更适合大型项目，通过逻辑聚合和复用提升代码可维护性，同时提供更好的 TypeScript 支持和响应式控制。
Options API 更简单直观，适合中小型项目或新手快速上手。

1. 代码组织方式

Options API
代码按选项类型分割为 data、methods、computed、watch、生命周期钩子等。同一功能的逻辑可能分散在不同选项中，导致复杂组件的代码阅读和维护困难。
示例：
```
export default {
  data() { return { count: 0 } },
  methods: { increment() { this.count++ } },
  mounted() { console.log('Mounted') }
}
```

Composition API
通过 setup() 函数按逻辑功能组织代码，将同一功能的响应式数据、方法、计算属性等集中在一起，提升内聚性。
示例：

import { ref, onMounted } from 'vue';
export default {
  setup() {
    const count = ref(0);
    const increment = () => { count.value++ };
    onMounted(() => { console.log('Mounted') });
    return { count, increment };
  }
}

2. 逻辑复用能力

Options API
通过 mixins 或作用域插槽复用逻辑，但存在命名冲突、数据来源不透明等问题，尤其在多个 mixins 混合时难以调试。

Composition API
通过自定义的 Composition 函数（如 useCounter()）封装逻辑，实现高内聚、低耦合的复用，避免命名冲突，且代码来源清晰。
示例：

// 复用逻辑的 Composition 函数
function useCounter() {
  const count = ref(0);
  const increment = () => { count.value++ };
  return { count, increment };
}

// 在组件中复用
export default {
  setup() {
    const { count, increment } = useCounter();
    return { count, increment };
  }
}

3. TypeScript 支持

Options API
依赖 this 上下文访问数据，类型推导较为困难，需额外类型声明。
Composition API
基于函数式编程，天然支持类型推断，结合 ref<T>、reactive<T> 等 API 可轻松实现类型安全。

4. 响应式系统

Options API
隐式依赖 Vue2 的响应式系统（基于 Object.defineProperty），数据定义在 data() 中，响应式细节被封装。
Composition API
显式使用 Vue3 的响应式 API（基于 Proxy），如 ref、reactive、computed 等，提供更细粒度的控制。