为什么ref定义的属性在template里不用加.value

zzz

其实通过之前的ref和reactive的底层原理就能知道个大概，但还是再单独再理解一下。
1.ref的本质
ref创建的是一个响应式对象，而不是一个原始值

1. <font face="Tahoma" size="2">import { ref } from 'vue';
   
2. const count = ref(0);
   
3. console.log(count); // 输出： { value: 0 }</font>

复制代码

2.模板中的‘自动解包’
Vue 的模板编译器会解析你在模板中使用的变量。当它发现这个变量是一个 ref 时，会自动地、悄悄地帮你加上.value。

1. <template>
   
2.   <div>{{ count }}</div>
   
3. </template>

复制代码

编译器在处理时，会把它‘翻译’成类似这样的东西：

1. // 这是伪代码，示意编译过程
   
2. h('div', count.value)

复制代码

这就意味着，你写的 {{ count }} 在运行时实际上变成了 {{ count.value }}。这个过程就叫做 ‘解包’。

核心结论：在 <template> 中不用加 .value 是 Vue 提供的一个语法糖，它通过编译时的自动解包来提升开发体验，让你在模板中可以更直观地使用响应式变量。