ref 是 Vue 3 声明基本类型响应式数据最常用方式，通过 .value 访问修改，在模板中自动解包；因 Proxy 无法代理原始值，ref 将其包装为响应式对象。
用 ref 声明基本类型响应式数据，是 Vue 3 最常用也最直接的方式。它把原始值（比如数字、字符串、布尔值）包装成一个带 .value 属性的响应式对象，让 Vue 能追踪变化并更新视图。
怎么创建 ref 基本类型变量
从 vue 导入 ref，传入初始值即可：
-
const count = ref(0)→ 数字响应式变量 -
const message = ref('Hello')→ 字符串响应式变量 -
const isActive = ref(false)→ 布尔响应式变量
在 JavaScript 中怎么读写
必须通过 .value 访问和修改，否则不会触发响应式更新：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 读取：
console.log(count.value) - 修改：
count.value = 10或count.value++ - 注意：
count本身不是响应式值，count.value才是
在模板中怎么用
Vue 会自动解包，不需要写 .value：
立即学习“前端免费学习笔记（深入）”；
-
{{ count }}→ 显示当前数字 -
{{ message }}→ 显示字符串 -
<button>点我加一</button>→ 模板中可直接对 ref 变量做运算（Vue 内部已处理解包）
为什么必须用 ref 包基本类型
因为 Vue 3 的响应式底层基于 Proxy，而 Proxy 只能代理对象，不能代理原始值（如 string、number）。ref 就是为了解决这个问题——它把基本类型“装进”一个响应式对象里，让 Vue 有地方挂载依赖和触发更新。
