Vue3核心特性如何使用 Composition API 替代传统的 Options API

Vue3推荐用Composition API替代Options API，核心是按业务聚堆组织逻辑、显式声明响应式、函数化生命周期、简化语法。它不强制淘汰Options API，但能提升清晰度、复用性与可维护性。

Vue3 推荐用 Composition API 替代 Options API，核心不是“能不能用”，而是“怎么组织更清晰、复用更安全、维护更省力”。它不强制淘汰 Options API（两者仍可共存），但真正发挥 Vue3 能力的关键，在于转变逻辑组织方式——从“按选项分堆”转向“按业务聚堆”。

把相关逻辑写在一起，告别上下跳转

Options API 中，一个功能的代码分散在 data、methods、watch、computed 等多个区块。比如“搜索用户”涉及：搜索关键词（data）、触发请求的方法（methods）、监听关键词变化（watch）、过滤后的列表（computed）。写 500 行后，你得反复滚动查找。

Composition API 把这些全收进一个逻辑块：

1. 定义 searchKeyword = ref('')（响应式数据）
2. 定义 filteredUsers = computed(() => ...)（计算属性）
3. 用 watch(searchKeyword, ...) 响应变化
4. 写 async function fetchUsers() {...} 并在需要时调用

所有和“搜索”有关的代码，物理位置相邻，折叠/展开一目了然，也方便抽成独立文件（如 useUserSearch.js）。

用 ref 和 reactive 明确响应式边界

Options API 隐式依赖 this 和 data 返回对象，响应式规则模糊；Composition API 让你主动选择响应式工具：

1. ref：适合基础类型（数字、字符串、布尔）或需要被解构/传递的单个值。模板中直接写 {{ count }}，脚本中必须写 count.value
2. reactive：适合对象或数组。直接操作属性，如 user.name = '李四'，无需 .value。但注意：解构会丢失响应式，要用 toRefs 包一层再解构

这种显式声明，让响应式行为可预测，也利于 TypeScript 类型标注。

生命周期和逻辑复用都变成函数调用

Options API 的 mounted、updated 是配置项，写在哪、怎么传参都不够灵活；Composition API 统一为 onMounted(() => {...}) 这样的函数：

1. 可以多次调用（比如多个模块各自注册 mounted 逻辑）
2. 可封装进组合函数（例如 useMousePosition() 内部自动调用 onMounted 和 onUnmounted）
3. 复用不再靠 mixins（易冲突、来源不清），而是 import 一个函数，解构使用，命名空间完全可控

用 <script setup> 简化语法，聚焦业务

不用再写 export default { setup() { return { ... } } } 这套样板。直接写：

<script setup>import { ref, onMounted } from 'vue'const count = ref(0)onMounted(() => console.log('已挂载'))</script>

所有顶层声明（变量、函数、导入）默认暴露给模板，无需 return，没有 this，没有上下文丢失风险。这是 Vue3 最新推荐、最简洁、最主流的写法。