Vue 中的 ref 变量必须通过 .value 属性读写，因为 ref 返回的是含 value 属性的响应式对象而非原始值；模板中自动解包，setup 中须显式访问 .value。
Vue 中的 ref 变量必须通过 .value 属性来读取和修改其内部值，这是响应式系统的核心规则。
为什么必须用 .value？
ref 返回的是一个被 reactive 包装过的对象，它本身不是原始值，而是一个包含 value 属性的响应式容器。JavaScript 无法自动解包这个对象，所以不能像普通变量那样直接读写。
- 声明时：
const count = ref(0)→count是一个对象，不是数字 - 读取时：
count.value才是真正的数值0 - 修改时：
count.value = 5触发视图更新；直接赋值count = 5会丢失响应性
在 setup() 中正确使用 .value
在组合式 API 的 setup() 函数里，所有对 ref 的操作都需显式访问 .value：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 初始化：
const message = ref('Hello') - 读取：
console.log(message.value) - 修改：
message.value = 'Hi there' - 作为函数参数传递时，传
message.value得到的是普通值（非响应式），如需保持响应性，应传整个ref对象或使用toRef
模板中不用 .value
在 Vue 模板（如 <template>）中，Vue 编译器会自动解包 ref，所以直接写 {{ count }} 即可，无需 {{ count.value }}。这是模板语法的便利设计，但仅限模板内生效。
立即学习“Java免费学习笔记（深入）”；
常见错误与注意事项
容易忽略的细节会影响响应性或导致报错：
- 解构
ref会丢失响应性：const { value } = ref(1)→value是普通变量，修改不触发更新 - 函数返回
ref时，调用后仍要加.value：const r = someRefFn(); r.value = 10 - 类型推导（TypeScript）中，
ref(1)的类型是Ref<number></number>，访问时类型检查也要求你写.value - 在
watch或computed中，通常直接传ref（如watch(count, ...)），它们内部已处理.value访问
