vue3之ref、toRef、toRefs详解

2023-09-24 00:18:13

深入理解 Vue 3 中的 Ref、toRef 和 toRefs

Vue 3 引入了新的 API，极大地扩展了我们与响应式数据交互的方式。其中包括 ref、toRef 和 toRefs，它们提供了获取和管理响应式数据的强大方式。本文将深入探究这些 API 的细微差别，并通过实际示例展示其用法。

ref

ref API 允许我们获取组件或元素的引用。这在需要与 DOM 元素交互或访问组件实例时非常有用。ref 可以通过在模板中使用 ref 属性或在脚本中使用 ref() 函数来使用。

语法：

const myRef = ref(initialValue);

示例：

// 获取组件实例
const myComponent = ref(null);

// 获取元素引用
const myElement = ref(null);

// 在模板中使用 ref
<template>
  <div ref="myRef">Hello World!</div>
</template>

// 在脚本中使用 ref
export default {
  mounted() {
    console.log(this.$refs.myRef); // <div ref="myRef">Hello World!</div>
  },
};

toRef

toRef API 允许我们将响应式对象或数组中的某个属性转换为一个独立的响应式 ref。这在需要将特定属性绑定到模板或侦听器时非常方便。

语法：

const myRef = toRef(object, 'property');

示例：

// 将一个响应式对象中的属性转换为 ref
const myObject = reactive({
  name: 'John Doe',
  age: 30,
});

const myNameRef = toRef(myObject, 'name');

// 将一个响应式数组中的元素转换为 ref
const myArray = reactive(['John Doe', 'Jane Doe']);

const myFirstElementRef = toRef(myArray, 0);

// 在模板中使用 toRef
<template>
  <div>{{ myNameRef }}</div>
  <div>{{ myFirstElementRef }}</div>
</template>

// 在脚本中使用 toRef
export default {
  mounted() {
    console.log(myNameRef.value); // John Doe
    console.log(myFirstElementRef.value); // John Doe
  },
};

toRefs

toRefs API 允许我们将响应式对象中的所有属性转换为独立的响应式 ref。这对于将整个对象绑定到模板或侦听器非常有用。

语法：

const myRefs = toRefs(object);

示例：

// 将一个响应式对象中的所有属性转换为 ref
const myObject = reactive({
  name: 'John Doe',
  age: 30,
});

const myRefs = toRefs(myObject);

// 在模板中使用 toRefs
<template>
  <div>{{ myRefs.name }}</div>
  <div>{{ myRefs.age }}</div>
</template>

// 在脚本中使用 toRefs
export default {
  mounted() {
    console.log(myRefs.name.value); // John Doe
    console.log(myRefs.age.value); // 30
  },
};

比较

下表总结了 ref、toRef 和 toRefs 的差异：

特性	ref	toRef	toRefs
语法	`ref(initialValue)`	`toRef(object, 'property')`	`toRefs(object)`
作用	获取组件或元素的引用	将响应式对象或数组中的一个属性转换为一个独立的 ref	将响应式对象中的所有属性转换为独立的 ref
使用场景	获取组件实例、元素引用等	将一个响应式对象或数组中的一个属性绑定到模板或侦听器	将一个响应式对象中的所有属性绑定到模板或侦听器