ref()包裹基本类型创建响应式变量，需通过.value读写；模板中自动解包可直接使用变量名。
直接用 ref() 包裹基本类型值，就能让它变成响应式变量。核心就两点：创建时传入初始值，操作时必须通过 .value 读写。
怎么创建 ref 变量
从 vue 中导入 ref，调用它传入数字、字符串、布尔值等任意基本类型：
-
const count = ref(0)—— 创建响应式数字 -
const message = ref('Hello')—— 创建响应式字符串 -
const isActive = ref(true)—— 创建响应式布尔值
怎么在 JS 里读写 ref 值
在 <script setup></script> 或组合式 API 的逻辑中，一律使用 .value：
- 读取：
console.log(count.value) - 修改：
count.value += 1或message.value = 'World' - 注意：漏掉
.value就只是普通对象操作，不会触发视图更新
怎么在模板里用 ref 变量
Vue 会自动解包，直接写变量名就行，不用 .value：
-
{{ count }}—— 显示当前值 -
@click="count++"—— 模板内支持简写（本质仍是count.value++） -
v-if="isActive"、:class="{ active: isActive }"都可直接用
为什么 ref 要加 .value
因为 ref(0) 返回的不是一个原始值，而是一个带 value 属性的响应式对象（比如 { value: 0 }）。Vue 通过这个统一结构实现依赖收集和触发更新。没有 .value，就无法建立响应式连接。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
