import { ref } from 'vue';

import { ref } from 'vue'; 是 Vue 3 中用于响应式数据的一个重要语法。通过 ref 函数，我们可以将一个普通的 JavaScript 值转换为响应式的值，并可以在组件中对其进行操作。
具体说明：

什么是 ref?

ref 是 Vue 提供的一种创建基本类型的响应式数据的方式。
它会返回一个包含 .value 属性的对象，这个对象内部存储了我们传入的数据。

如何使用 ref？
import { ref } from 'vue';

const count = ref(0); // 创建了一个名为 count 的响应式变量，默认值为 0

console.log(count.value); // 输出当前的值：0

count.value++; // 修改 count 的值
console.log(count.value); // 输出修改后的值：1
登录后复制

为什么需要 ref ?

使用 ref 可以让普通的基本类型（如数字、字符串等）变成响应式的，使得当它们发生变化时能够触发视图更新。
对象类型可以直接使用 reactive() 来处理更复杂的场景。

在模板中的绑定当我们在Vue模板里引用 ref 类型的属性时，.value 会被自动解包，所以不需要显式地访问它：
<template>
<div>Count is {{ count }}</div> <!-- 自动解析count.value -->
</template>

<script setup>
import { ref } from 'vue';
const count = ref(0);
</script>
登录后复制

注意事项

如果你需要将非基础类型的复杂结构设置成响应式，则可以考虑使用 reactive 而不是 ref.
避免直接对 ref().value 进行深层嵌套赋值操作，这可能会破坏响应链路。