vue3 ref的用法

在Vue3中，ref是一个函数，用于创建一个响应式的引用。它接受一个初始值作为参数，并返回一个可通过.value访问和修改值的对象。

例如，我们可以使用ref创建一个名为a的引用，并将其初始化为0：
const a = ref(0);

我们可以通过访问a.value来获取或修改a的值：
console.log(a.value); // 输出0
a.value = 1;
console.log(a.value); // 输出1

除了基本类型外，我们还可以为ref的值指定更复杂的类型。可以使用Ref类型来明确指定ref内的值的类型。

例如，我们可以创建一个引用，其值可以是字符串或数字：
import type { Ref } from 'vue';

const year: Ref<string | number> = ref('2020');
year.value = 2020; // 成功！

在模板中使用ref时，需要注意自动"解包"只适用于ref作为模板渲染上下文的顶层属性的情况。如果ref是嵌套在对象中的属性，则需要手动解包。

例如，在模板中使用obj.count时，需要通过obj.count.value来访问ref的值：
&lt;script setup&gt;
import { ref } from 'vue';

const obj = {
count: ref(1)
}
&lt;/script&gt;

&lt;template&gt;
&lt;div&gt;{{ obj.count.value }}&lt;/div&gt;
&lt;/template&gt;

这样，我们就可以正确地使用Vue3中的ref了。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [Vue3超详细的ref()用法，看这一篇就够了](https://blog.csdn.net/EchoLiner/article/details/130445600)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]