ref 是 vue 3 中定义基本类型响应式数据的方式，通过 .value 访问修改，在模板中自动解包；因 proxy 无法直接代理基础类型，故需 ref 包装为响应式对象。
在 Vue 3 中，ref 是定义基本数据类型（如 string、number、boolean）响应式数据最直接的方式。它把原始值包装成一个带 .value 属性的响应式对象，让 Vue 能够追踪变化并自动更新视图。
怎么创建 ref 响应式变量
从 vue 导入 ref 函数，传入初始值即可：
import { ref } from 'vue'-
const count = ref(0)→ 创建数字响应式变量 -
const message = ref('Hello')→ 创建字符串响应式变量 -
const isActive = ref(true)→ 创建布尔响应式变量
script 里怎么读写值
在 JavaScript 逻辑中，必须通过 .value 访问或修改：
- 读取：
console.log(count.value) - 赋值：
count.value = 10 - 运算：
count.value++或message.value += ' World'
不写 .value 只会操作 ref 对象本身，不会触发响应式更新。
模板里怎么使用
在 <template></template> 中直接写变量名，Vue 会自动解包，无需 .value：
-
<p>{{ count }}</p>→ 显示 0、10、11… -
<button>+1</button>→ 事件处理器里仍要.value
这是 Vue 编译器做的语法糖，不是“省略”，而是设计使然。
为什么基础类型必须用 ref
Vue 3 的响应式核心是 Proxy，而 Proxy 只能代理对象和数组。基础类型无法被直接监听，所以：
-
let num = 0改变后，页面不会更新 -
const num = ref(0)后，num.value = 5就会触发视图刷新 - 本质是把基础值塞进一个有 getter/setter 的对象里，由 Vue 监控
.value的读写
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
