为什么ref定义的属性在template里不用加.value
本帖最后由 zzz 于 2025-9-8 15:37 编辑其实通过之前的ref和reactive的底层原理就能知道个大概，但还是再单独再理解一下。
1.ref的本质
ref创建的是一个响应式对象，而不是一个原始值
<font face="Tahoma" size="2">import { ref } from 'vue';
const count = ref(0);
console.log(count); // 输出： { value: 0 }</font>2.模板中的‘自动解包’
Vue 的模板编译器会解析你在模板中使用的变量。当它发现这个变量是一个 ref 时，会自动地、悄悄地帮你加上.value。
<template>
<div>{{ count }}</div>
</template>
编译器在处理时，会把它‘翻译’成类似这样的东西：
// 这是伪代码，示意编译过程
h('div', count.value)这就意味着，你写的 {{ count }} 在运行时实际上变成了 {{ count.value }}。这个过程就叫做 ‘解包’。
核心结论：在 <template> 中不用加 .value 是 Vue 提供的一个语法糖，它通过编译时的自动解包来提升开发体验，让你在模板中可以更直观地使用响应式变量。
页:
[1]