vue 3 中 ref 在模板中自动解包，无需写 .value；原理是模板编译器识别 ref 对象后，在渲染函数中自动补上 .value，仅限模板上下文生效，js 逻辑中仍需显式使用 .value。
Vue 3 中用 ref() 声明的数据，在模板中可以直接读取，**不需要写 .value** —— 这是 Vue 的自动解包机制在起作用。
模板里直接用，不加 .value
只要 ref 变量在 setup() 或 <script setup></script> 中被正确返回或暴露，模板中就能像普通变量一样使用：
-
{{ count }}✅ 正确，Vue 自动取count.value -
{{ count.value }}❌ 不报错但多余，不推荐 -
v-model="count"✅ 支持，v-model内部会处理.value -
:class="{ active: isActive }"✅isActive是 ref，布尔值会自动解包
为什么能直接用？原理是什么
Vue 模板编译器在解析时会识别出你用的是 ref 对象，然后在生成的渲染函数中自动补上 .value。相当于你写的是：
{{ count }}
实际运行时等价于：
{{ count.value }}
这个过程对开发者透明，且仅发生在模板上下文中（<template></template> 内）。
哪些地方不能自动解包
自动解包只在模板中生效，JS 逻辑里必须显式写 .value：
- 在
onMounted、watch、事件函数中读写：要用count.value - 作为函数参数传入：传
count.value才是原始值，传count是响应式对象 - 与
reactive对象嵌套时：若user = reactive({ age: count })，则user.age自动解包；但user.age = 25会替换整个 ref，应改用count.value = 25
常见误区提醒
容易混淆的几个点：
- 模板中写
{{ count.value }}能运行，但属于冗余写法，违背 Vue 设计意图 - 如果 ref 初始化为
null（如模板引用const inputRef = ref(null)），模板中用{{ inputRef }}会显示null，这不是错误，只是值还没就位 - 解包不递归：若
obj = ref({ a: 1 })，{{ obj.a }}会报错（obj是 ref，obj.a是 undefined），要写成{{ obj.value.a }}
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
