ref用于定义响应式基础类型变量，需通过.value读写，在模板中自动解包；而let声明的基础类型无响应性，无法触发视图更新。
在 Vue 3 的 Composition API 中，ref 是定义响应式基础类型变量（如字符串、数字、布尔值）最常用的方式。它本质是把一个普通值包装成一个带有 .value 属性的响应式对象，Vue 内部通过 Proxy 和 getter/setter 追踪依赖并触发更新。
如何用 ref 定义基础类型响应式变量
直接调用 ref() 并传入初始值即可：
-
const count = ref(0)→ 创建一个初始值为0的响应式数字 -
const message = ref('Hello')→ 创建一个响应式字符串 -
const isActive = ref(false)→ 创建一个响应式布尔值
注意：定义后必须通过 .value 读写值，例如 count.value++ 或 message.value = 'Hi'；模板中使用时可省略 .value（Vue 自动解包）。
为什么基础类型必须用 ref 而不是 let
JavaScript 基础类型是按值传递的，直接用 let count = 0 定义的变量不具备响应性。即使你在 setup 中返回它，改变它也不会触发视图更新。而 ref 返回的是一个被 Vue 追踪的对象，其 .value 属性的读写会被拦截，从而建立响应式联系。
简单说：ref 让基础类型“活”起来，能被 Vue 监听和更新。
在模板和逻辑中正确访问 ref 变量
✅ 模板中直接写变量名（自动解包）：<div>{{ count }}</div> —— 不需要写 {{ count.value }}
✅ 在 JavaScript 逻辑中必须加 .value：function increment() { count.value++ }console.log(message.value.toUpperCase())
⚠️ 常见错误：在 script 中漏掉 .value，导致赋值无效或读取到未定义。
ref 和 reactive 的关键区别
ref 适合基础类型和需要被解构/传递的响应式变量；reactive 只接受对象（包括数组），且解构后会丢失响应性。
-
ref(10)→ 可安全解构：const { value: count } = ref(10)，但要注意此时count不再响应式（推荐仍用原 ref 对象） -
reactive({ count: 10 })→ 不能对基础属性单独ref化，也不能用let { count } = state后直接改count++（会丢失响应）
所以：**要响应式地操作数字、字符串、布尔值，首选 ref**。
