ref 创建的是响应式包装对象，值存于 .value 属性；JS 中必须用 .value 读写以维持响应性，模板中自动解包无需 .value。
在 Vue 3 中，ref 创建的是一个响应式“包装对象”，真正存值的位置是它的 .value 属性。只有通过 .value 赋值或读取，才能触发响应式追踪和视图更新；直接对 ref 变量本身赋值（比如 count = 5）会丢失响应性。
JS 逻辑中必须用 .value 修改和读取
在 setup()、方法、watch、computed 或普通函数里操作 ref 数据时，一律要显式访问 .value：
-
读取值：用
count.value获取当前值，例如console.log(count.value) -
修改值：用
count.value = 10或count.value++等方式赋新值 -
参与运算：如
message.value += ' Hello'、isActive.value = !isActive.value
模板中自动解包，不用 .value
Vue 模板渲染阶段会对 ref 做透明解包：{{ count }} 等价于 {{ count.value }}，所以无需手动写 .value。
同理，在事件处理器中写 @click="count.value++" 是合法的，因为这是 JS 表达式上下文；但写成 @click="count++" 就无效——它试图给整个 ref 对象自增，不是对 .value 操作。
Element Plus UI Vue3
下载
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。
立即学习“前端免费学习笔记（深入）”；
watch 和 watchEffect 中也要用 .value
虽然 watch(count, ...) 可以直接监听 ref，但回调函数里的参数仍是 ref 对象，需通过 .value 访问具体值：
watch(count, (newVal, oldVal) => console.log(newVal.value, oldVal.value))-
watchEffect(() => console.log('current:', count.value))—— 这里count.value是被追踪的依赖
常见错误：直接赋值导致响应性丢失
以下写法会让数据脱离 Vue 的响应式系统：
-
count = 100→count变成普通数字，不再是 ref 对象 -
const temp = count; temp.value = 20虽然能改值，但若temp是局部变量且未被依赖收集，可能不会触发更新（取决于是否在响应式上下文中被读取过）
正确做法始终是：保持对原始 ref 变量的 .value 操作。
