ref模板中自动解包为.value值，脚本中需显式.value；reactive模板中直接点访问属性，不支持原始类型，整体赋值会丢失响应性。
在 Vue 模板中，ref 和 reactive 的渲染行为看似一致，实则底层机制不同，这直接影响取值方式、响应性边界以及模板中的使用习惯。
ref 在模板中自动解包，无需 .value
定义为 ref(1) 的响应式变量，在模板中直接写 {{ count }} 即可显示数值，Vue 编译器会在运行时自动读取其 .value。这种“透明解包”仅发生在模板渲染上下文中（包括插值、指令如 v-bind、v-if 等），不适用于 JavaScript 逻辑中。
- ✅ 模板中：
{{ count }}、:disabled="loading"—— 正确，自动取 .value - ❌ 脚本中：
if (count) { ... }—— 错误，必须写count.value - ⚠️ 注意：嵌套对象中 ref 属性不会被深层解包，例如
const obj = reactive({ x: ref(1) })，模板中仍需{{ obj.x.value }}
reactive 对象在模板中按原样访问，无自动解包
reactive({ name: 'Alice', age: 25 }) 返回的是一个代理对象，模板中通过点语法直接访问属性，如 {{ user.name }}。它的响应性基于 Proxy 拦截，所有属性访问都经过响应式追踪，但本身不涉及 .value 概念。
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章