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的值：
<script setup>
import { ref } from 'vue';
const obj = {
count: ref(1)
}
</script>
<template>
<div>{{ obj.count.value }}</div>
</template>
这样，我们就可以正确地使用Vue3中的ref了。123
引用[.reference_title]

1 2 3 Vue3超详细的ref()用法，看这一篇就够了[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-2allinsert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]