以下是使用 ref 的基本示例：
import { ref } from 'vue';
// 创建一个 ref
const myVar = ref('initial value');
// 读取值
console.log(myVar.value); // 输出: initial value
// 修改值
myVar.value = 'new value';
console.log(myVar.value); // 输出: new value
在上述示例中，myVar 是一个包含 .value 属性的 ref 对象，我们可以通过 .value 来读取或修改它的值。
除了基本的 ref 函数，Vue 3.0 还提供了一些用于处理 ref 的辅助函数。以下是其中一些：
1. toRef 函数：
toRef 函数用于创建一个 ref 对象，其值绑定到原始对象的指定属性。这样，当原始对象的属性发生变化时，ref 对象的值也会相应地更新。
import { reactive, toRef } from 'vue';
const obj = reactive({
a: 1,
b: 2
});
const aRef = toRef(obj, 'a');
console.log(aRef.value); // 输出: 1
obj.a = 100;
console.log(aRef.value); // 输出: 100
2. toRefs 函数：
toRefs 函数可以将整个响应式对象转换为一个包含 ref 的对象。这对于在组件中使用多个响应式对象时很有用。
import { reactive, toRefs } from 'vue';
const obj = reactive({
a: 1,
b: 2
});
const { a, b } = toRefs(obj);
console.log(a.value, b.value); // 输出: 1 2
obj.a = 100;
obj.b = 200;
console.log(a.value, b.value); // 输出: 100 200
这些是 Vue 3.0 中与响应性 API 相关的 ref 函数及其辅助函数的基本用法。这些 API 使得在组件中更方便地处理和追踪状态的变化。
转载请注明出处：http://www.zyzy.cn/article/detail/579/Vue 3.0