vue 3 响应式核心是 reactive（适合对象/嵌套结构，深层响应但解构失响应）与 ref（适配原始值及模板，需 .value 访问，自动解包仅限顶层）。

Vue 3 的响应式系统是整个框架的基石，理解 reactive 和 ref 的本质与适用场景，不是为了死记 API，而是为了写出更可控、更不易出错的状态逻辑。

reactive：适合对象和嵌套结构的“深层响应式容器”

reactive 接收一个普通对象（或数组、Map、Set 等），返回一个响应式代理。它内部使用 Proxy 拦截属性读写，天然支持深层响应——即对象内部任意层级的属性变化都会触发更新。

• 只能用于对象类型；传入原始值（如字符串、数字）会直接报错
• 解构后会丢失响应性（因为解构得到的是普通值），需配合 toRefs 使用
• 适合管理结构较复杂、字段较多、且频繁嵌套访问的状态，比如表单数据、配置对象

ref：原始值与模板友好的“响应式包装器”

ref 可以包装任意类型（包括原始值、对象、函数），返回一个带 .value 属性的响应式引用。它的设计初衷之一，就是解决模板中访问响应式原始值的语法一致性问题。

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

• 在模板中使用时自动解包 .value，无需手动写 count.value
• 在 JS 中读写必须通过 .value，这是明确的“响应式边界”信号
• 当 ref 包裹对象时，其内部也会被 reactive 处理（Vue 3.3+ 还支持 shallowRef 避免深层转换）

何时选 reactive，何时选 ref？关键看“使用上下文”

没有绝对优劣，只有是否匹配当前需求：

• 组合式 API 中定义多个相关状态？用 reactive 统一管理，再用 toRefs 暴露给模板，更简洁
• 需要在模板中直接绑定一个计数器、开关、输入框值？ref 更自然，语义清晰，无需解构
• 接收 props 或 defineModel 的默认值？优先用 ref，避免意外响应化非响应式对象
• 想监听某个深层属性变化？watch 配合 ref 或 computed 更稳妥，reactive 对象需用函数形式监听路径

别忽略 ref 的“隐式解包”规则

Vue 在模板、v-model、watch、computed 等上下文中会对 ref 自动读取 .value，但仅限顶层变量。一旦进入表达式或函数调用，就恢复为普通 JS 行为：

• ✅ {{ count }} → 自动读 count.value
• ✅ v-model="searchText" → 自动双向绑定到 searchText.value
• ❌ {{ count + 1 }} → 实际执行的是 count + 1，而 count 是 ref 对象，结果是 [object Object]1
• ❌ watch(() => obj.count, ...) → 如果 obj.count 是 ref，这里不会自动解包，需写成 () => obj.count.value

不复杂但容易忽略。掌握 reactive 和 ref 的行为边界，比记住语法更重要。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！