Vue 3 中 ref 定义基础类型响应式变量的核心是：调用 ref() 包裹初始值，JS 中通过 .value 读写，模板中直接使用变量名无需 .value；需从 'vue' 导入 ref，返回 Ref 对象，其 .value 属性为响应式数据载体。
Vue 3 中用 ref 定义基础类型（如字符串、数字、布尔值）的响应式变量，核心就三点：调用 ref() 包裹初始值、JS 里通过 .value 读写、模板中直接写变量名无需 .value。
怎么创建 ref 变量
从 'vue' 导入 ref，传入任意基础类型值即可：
-
const count = ref(0)—— 创建响应式数字 -
const message = ref('Hi')—— 创建响应式字符串 -
const isActive = ref(false)—— 创建响应式布尔值
返回的是一个 Ref 对象，它的 .value 属性才是真正的响应式数据载体。
在 JavaScript/TS 中怎么读写值
必须显式使用 .value 才能访问或修改值，否则只是操作普通对象引用：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
立即学习“前端免费学习笔记（深入）”；
- 读取：
console.log(count.value) - 修改：
count.value = 5或count.value++ - 错误写法：
count = 5（不触发响应式更新）
在模板中怎么使用
Vue 模板会自动解包 ref 变量，直接写变量名即可，不用加 .value：
-
<p>{{ count }}</p>→ 显示当前数值 -
<button @click="count.value++">+1</button>→ 事件处理器里仍需.value
这是因为 Vue 编译器对模板做了特殊处理，但逻辑层（setup 函数、方法、计算属性等）始终要靠 .value。
为什么不能直接赋值对象或数组给 ref
ref 可以包装对象或数组，但不推荐用于复杂结构：
- 例如
const list = ref([1, 2, 3])是合法的，但深层嵌套属性变更（如list.value[0] = 99）可能不触发更新 - 深层响应更可靠的方式是用
reactive处理对象/数组，或用ref+shallowRef/customRef控制粒度 - 基础类型无此问题，ref 是最自然、最安全的选择
