Vue3 Composition API入门

可视化演示

展示setup执行时机与context参数、ref与reactive响应式依赖追踪、Options API到Composition API迁移映射，步进切换探索。

setup函数基础

拿到一张新菜谱“红烧排骨”，第一步不是开火，而是在备菜台上备齐所有材料：排骨、葱姜、料酒、糖色。Vue3的setup函数就是这张备菜台——组件开始正式“烹饪”前，所有数据、方法、计算逻辑、侦听器都要先在这里码放整齐，等着被端上灶台。

在旧式Options API里，data写数据、methods写方法、computed写计算、watch写侦听，好比四个互相隔离的储物柜。setup打破了这种区隔：它把原本分散在各“选项”中的代码汇聚到一个函数里，函数执行后返回的对象直接暴露给模板使用。这种写法叫组合式API（Composition API），核心思想是“逻辑按功能聚拢”而不是“代码按类型分柜”。

setup的执行时机非常早——在组件实例初始化的最前端，早于beforeCreate和created。此时props已经解析完毕，它接收两个参数：props是父组件传入的属性集合，context则包含attrs、slots、emit三个成员。注意setup函数体内无法使用this，因为实例尚在初始化途中，这是很多Vue2老手踩的第一个坑。

所以，升级Vue3后打开一个组件，最先映入眼帘的不再是data而是setup——它像一张新备菜台，把所有用得到的“材料”先码整齐，后厨（渲染器）再开始点火炒菜。

ref响应式

厨房里最顺手的盛具是调料小碗：盐、糖、生抽各装一碗，单手可拿、随时替换、互不干扰。ref就是Vue3为“单个值”准备的这样一只小碗，尤其适合字符串、数字、布尔值这类基础数据。

用ref(0)就能创建一个响应式“小碗”。在JavaScript逻辑中，想读盐得先揭开碗盖——ref的读写都需要通过.value访问；但在模板里，Vue会自动帮你“揭开碗盖”，直接写count就能拿到值。这就像备菜时从碗里取盐，而炒菜时碗已经敞开放在灶台上。

有人以为ref只服务基础类型，其实ref内部遇到对象时，会把对象交给reactive的Proxy机制处理。所以ref({ list: [] })一样拥有深层响应能力。ref真正的独特优势是“支持整体替换”：count.value = newObject时，所有依赖自动收到新值，而reactive做不到这一点。

总结来说，ref是那只“单手可拿的小碗”：基础类型、组件状态、需要整体替换的场景，选用它准没错。

reactive响应式

整只鸡、整条鱼、一篮子蔬菜，小碗装不下，得换一个大托盘。reactive就是那只大托盘——它接受一个对象或数组，返回一个深层响应的代理对象。你可以像从前操作普通对象一样操作它，而它会在背后默默完成依赖收集与更新派发。

reactive的底层是Proxy（代理机制）。当你访问state.user.name，get拦截器会逐层为嵌套对象建立代理；当你修改属性，set拦截器会触发更新。数据多、嵌套深、以“对象整体”为操作单位时，reactive能让代码比ref的.value链简洁得多。

但reactive有两个“烫手”特性：一是不能直接整体替换——state = newObj会让旧代理脱离响应轨道，新对象变成普通数据；二是解构会丢失响应性——const { name } = state取出的name不再被追踪。这两个坑分别对应思维导图中的“引用替换”和“解构丢失”。

大托盘适合“整套餐具”一起管理，但如果你要频繁“换一套餐具”，ref那只小碗更稳妥。选择ref还是reactive，核心就看一件事：是否需要整体替换引用。

computed计算属性

厨房里有台自动切菜机：土豆放进去，出来是土豆丝；换胡萝卜进去，出来是胡萝卜丝。你不需要手动切，机器自动跟着原料走。computed就是这台备菜机——它接收一个getter函数，根据响应式依赖自动计算派生值。

computed返回的是一个只读的ref对象，它有两个迷人特性：依赖自动追踪与缓存。getter里读取到的每一个响应式数据都会被登记为依赖；只要依赖没有变化，多次访问computed直接返回上一次计算结果，绝不多算一次。这好比切菜机已经切好了一碗土豆丝，只要土豆没换，你随时来拿都有现成的。

computed甚至支持“可写”版本：传入一个包含get和set的对象，就能在赋值时反向推导依赖数据的更新。而methods里的普通函数每次渲染都会重新执行，没有缓存。一句话区分：数据“派生”用computed，事件“动作”用methods。

当你需要“根据已有材料自动生成半成品”——比如列表筛选、总数统计、格式化文本，交给computed这台自动切菜机，又快又省心。

watch侦听器

煲汤时你会设一个闹钟：水开了关小火，起锅前撒葱花。watch就是这只闹钟——你明确告诉它“盯哪口锅、什么时候响、响了做什么”，它平时绝不打扰你。

在Composition API中，watch(source, callback, options)的三个部分都很直观：source是要盯的数据源，可以是ref、reactive对象、getter函数或它们的数组；callback接收(newVal, oldVal)两个参数，让你知道“汤”从什么状态变成了什么状态。它默认惰性——source真正变化时才执行，正符合“闹钟平时不响”的直觉。

watch还支持丰富的配置：deep: true递归侦听对象内部的深层变化，immediate: true让回调在创建时立即执行一次，适合“初始化时也要跑一遍逻辑”的场景。此外，watch回调内可以返回一个清理函数，用于取消旧请求、清除定时器，避免上一个任务污染下一个任务。

watch像一只精准的闹钟，最适合“某数据变化后做特定动作”——比如筛选条件变了重新请求数据、用户登录状态变了跳转页面。

watchEffect侦听器

如果watch是闹钟，watchEffect就像一个永远跟拍你的助理摄像机：你走到哪它拍到哪，看到你动作变了就立刻跟上，不需要你提前告诉它“重点盯什么”。

watchEffect(fn)会立即执行一次fn，执行过程中读取到的所有响应式数据都被自动登记为依赖；之后任何一个依赖发生变化，fn又会自动重跑。它天然是“收集式”的——依赖不是声明出来的，而是“用过即追踪”。这正适合日志上报、埋点统计这类“读了一堆数据，任一变化都要重跑”的场景。

与watch对比：watch必须显式声明source、惰性执行、回调能拿到旧值；watchEffect不需要声明数据源、立即执行、拿不到旧值，但写法极简。要手动停止侦听时，watchEffect会返回一个停止句柄，调用它即可。组合函数内部使用watchEffect尤其顺手，因为它零配置、随用随走。

摄像头不需要你告诉它重点——当逻辑里“读了一堆数据，任何一处的变化都要重跑”时，用watchEffect就是最省心的选择。

生命周期变化

做一道菜有固定流程：备菜、下锅、加水、收汁、装盘。Vue组件的生命也类似——创建、挂载、更新、卸载。Vue3在保留这套流程的同时，把钩子从“选项”改成了“函数”。

最明显的变化是：beforeCreate和created被setup本身取代了，因为setup的执行时机就落在创建阶段。其余钩子统一改为onXxx函数形式，并且必须在setup内调用：mounted→onMounted、updated→onUpdated、beforeUnmount→onBeforeUnmount、unmounted→onUnmounted。此外，Vue2的beforeDestroy和destroyed在Vue3中更名为onBeforeUnmount和onUnmounted。

组合式钩子有一个旧选项式没有的优势：可以多次调用。同一个onMounted可以按代码顺序注册多个回调，这让“同一个功能的初始化代码”可以写在一起，而不是分散在各处。比如“启动轮询”和“绑定事件”两段初始化，在逻辑上属于同一功能时，就能在同一个组合函数里相邻注册。

就像菜谱把“预热烤箱”和“准备模具”合并为一句“准备开始”，setup让创建阶段有了统一入口，但烹饪的关键时间节点一个都没少。

迁移与取舍

老厨房升级不必推倒重来，而是逐个灶台改造。从Options迁移到Composition同样如此：不需要一次性重写整个项目，可以一页一页、一个功能一个功能地搬。

推荐的迁移路径：第一步，引入<script setup>语法糖，让组合式写法更简洁；第二步，把data里的数据替换为ref/reactive；第三步，methods里的函数改为setup内的普通函数；第四步，computed和watch照搬，生命周期钩子改名；最后，观察哪些逻辑与组件实例无关，抽取为useXxx组合函数。useLogin、useChart、usePermissions这样的函数，就是那块可以“整盘端走”的操作台。

组合函数（Composables）是Composition API的灵魂：它把数据、计算、侦听、生命周期全部封装在一个函数里，跨组件复用如同一键复制菜谱。但同时也要提醒一句“保持简单”——简单的展示型页面继续用Options API完全没问题，不必为改造而改造。迁移的衡量标准只有一个：代码是否更容易理解和维护。

厨房改造的终点不是“用上所有新工具”，而是“每道菜都有清晰的流程”。用Composition去聚合真正重复、混乱的逻辑，才是它最大的价值。

AI 应用场景

Python 演示

"""用 Python 模拟 Vue3 的 ref / computed / watchEffect 响应式原理"""class Ref:    """模拟 ref：包装单值，读取收集依赖，写入派发更新"""     _active = None  # 当前正在运行的副作用（effect）     def __init__(self, value):        self._value = value        self._effects = set()     @property    def value(self):        if Ref._active is not None:            self._effects.add(Ref._active)        return self._value     @value.setter    def value(self, new_value):        if new_value != self._value:            self._value = new_value            for fn in list(self._effects):                fn()  def watch_effect(fn):    """模拟 watchEffect：立即执行并自动收集依赖"""    Ref._active = fn    fn()    Ref._active = None  def computed(fn):    """模拟 computed：用 Ref 作为缓存盒，依赖变化时自动重算"""    box = Ref(None)     def recompute():        box.value = fn()     watch_effect(recompute)    return box  if __name__ == "__main__":    count = Ref(1)    doubled = computed(lambda: count.value * 2)    logs = []     watch_effect(lambda: logs.append(f"doubled={doubled.value}"))    count.value = 3    count.value = 5    print(" -> ".join(logs))    # 输出: doubled=2 -> doubled=6 -> doubled=10

1. Ref._active = None类变量作为“当前正在运行的副作用指针”，是依赖收集的关键。
2. @property def value用property让 count.value 读起来像普通属性，getter中完成依赖登记。
3. self._effects.add(Ref._active)读取时把正在运行的effect登记为订阅者，这就是“收集依赖”。
4. for fn in list(self._effects)写入时对订阅者集合做快照遍历，逐个通知更新。
5. watch_effect(fn)先把fn设为全局活跃effect再执行它，让首次运行的读取操作自动完成收集。
6. box.value = fn()computed中的recompute将计算结果写入缓存盒，触发依赖这个盒子的effect重新执行。

常见误区

面试题