Vue3 Composition API 深度解析：告别Options API的局限性

一、为什么需要Composition API？

二、核心概念：setup() 函数

三、响应式核心：ref() 和 reactive()

1. ref - 处理基本类型/对象

2. reactive - 处理对象

四、生命周期钩子新写法

五、强大的逻辑复用：组合式函数

六、响应式计算：computed & watch

1. 计算属性

2. 侦听器

七、最佳实践指南

八、对比Options API

结语

一、为什么需要Composition API？

在Vue2中，我们使用 Options API（data、methods、computed等选项）组织代码。当组件功能复杂时，相同逻辑的代码被分散到不同选项中，导致：

可读性下降
逻辑复用困难（依赖mixins）
Typescript支持有限

Vue3的 Composition API 通过逻辑功能组合解决了这些问题，让代码更灵活、更可维护！

二、核心概念：`setup()` 函数

Composition API的入口是 setup() 函数，它在组件创建前执行，替代了Vue2的data()、created()等选项：

import { ref } from 'vue';export default {setup() {// 定义响应式数据const count = ref(0);// 定义方法const increment = () => {count.value++;};// 暴露给模板return { count, increment };}
}

关键点：

setup() 在 beforeCreate 前执行，没有 this
返回对象中的属性会暴露给模板使用
所有Composition API函数都需要在此引入

三、响应式核心：`ref()` 和 `reactive()`

1. `ref` - 处理基本类型/对象

const num = ref(0);       // { value: 0 }
const user = ref({ name: 'Leo' });console.log(num.value);   // 访问值
num.value = 5;            // 修改值

2. `reactive` - 处理对象

const state = reactive({count: 0,user: { name: 'Alice' }
});state.count = 10;         // 直接修改属性

特性	`ref`	`reactive`
数据类型	任意	对象
模板访问	自动解包	直接访问属性
重新赋值	`.value` 修改	不能直接替换对象

四、生命周期钩子新写法

在setup()中使用生命周期前缀加on：

import { onMounted, onUpdated } from 'vue';setup() {onMounted(() => {console.log('组件挂载完成!');});onUpdated(() => {console.log('组件更新了!');});
}

Vue2选项	Composition API等价
`beforeCreate`	`setup()` 自身
`created`	`setup()` 自身
`mounted`	`onMounted`
`updated`	`onUpdated`

五、强大的逻辑复用：组合式函数

将相同逻辑抽离为可复用函数（替代mixins）：

// useCounter.js
import { ref } from 'vue';export default function useCounter() {const count = ref(0);const increment = () => count.value++;const decrement = () => count.value--;return { count, increment, decrement };
}

在组件中使用：

import useCounter from './useCounter';setup() {const { count, increment } = useCounter();return { count, increment };
}

优势：

显式暴露使用的属性和方法
多个组合函数互不冲突
完美支持TypeScript类型推断

六、响应式计算：`computed` & `watch`

1. 计算属性

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

2. 侦听器

// 侦听单个ref
watch(count, (newVal, oldVal) => {console.log(`计数变化：${oldVal} → ${newVal}`);
});// 侦听多个源
watch([count, name], ([newCount, newName]) => {// 处理变化
});

七、最佳实践指南

按功能组织代码：将同一功能的ref、computed、watch放在一起

复杂组件使用<script setup>语法糖（SFC专属）：

<script setup>
import { ref } from 'vue';
const count = ref(0); // 自动暴露到模板
</script>

组合函数命名以use开头（如useMouseTracker）

需要DOM时使用ref绑定元素：

<template><div ref="root">元素</div>
</template><script>
import { ref, onMounted } from 'vue';
export default {setup() {const root = ref(null);onMounted(() => {console.log(root.value); // 获取DOM元素});return { root };}
}
</script>

八、对比Options API

// Options API (Vue2风格)
export default {data() {return { count: 0 }},methods: {increment() { this.count++ }},mounted() {console.log('mounted');}
}// Composition API (Vue3)
export default {setup() {const count = ref(0);const increment = () => { count.value++ };onMounted(() => console.log('mounted'));return { count, increment };}
}