ref() 创建响应式引用

最后更新：2026-10-22

ref() 把任意值包装成响应式对象，通过 .value 读写；用于基本类型（字符串/数字/布尔）和需要整体替换的对象。

📝 语法

import { ref } from "vue"

const count = ref(0)
count.value++          // 脚本中通过 .value 读写
template: {{ count }}  // 模板中自动解包

value	任意类型的初始值；不传则为 undefined

返回值：一个带 .value 属性的响应式对象（Ref）

修改下面的代码，在预览区实时查看效果：

输出：

页面显示「点击了 0 次」；每次点击数字 +1。

⚠️ 注意 脚本里必须写 count.value——直接 count++ 会把变量指向新数字，失去响应性。

💡 提示 setup 中返回 ref 后，模板里自动解包：写 {{ count }} 而不是 {{ count.value }}。

ℹ️ 说明 对象/数组要整体替换时也用 ref；深层嵌套对象想整体响应式可用 reactive()。

更多案例即将上线。

Q 为什么 .value 不能省？

A JS 无法追踪基本类型的读写，只能用一个带 getter/setter 的包装对象来捕获访问，这就是 .value 的由来。

Q ref 里放对象会失去响应性吗？

A 不会。ref(obj) 内部会用 reactive 深度代理该对象，.value.foo 修改依然触发更新。

Q 什么时候用 ref、什么时候用 reactive？

A 默认用 ref（可放任意类型、可整体替换、解构后不丢响应性）；reactive 只适合对象，且解构会丢响应性。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。