Vue.js toRef 与 toRefs：让你的数据起飞

2023-04-09 22:07:29

用 toRef 和 toRefs 使你的 Vue.js 数据栩栩如生

在 Vue.js 中，响应式数据是实现高效、动态且用户友好的应用程序的关键。toRef 和 toRefs 函数使响应式数据化变得轻而易举，这在处理基本数据类型和对象数据时特别有用。

toRef：让基本数据类型动起来

toRef 函数将一个基本数据类型（字符串、数字或布尔值）转换为一个响应式数据。当这个基本数据类型的值发生变化时，Vue.js 会自动更新视图中的相关内容。这避免了繁琐的监听和手动更新过程。

const name = ref('John');
const toRefName = toRef(name);

toRefs：对象的全面响应式化

toRefs 函数将一个对象中每个属性转换为响应式数据。这对于处理对象数据非常有用，因为它可以一次性响应化整个对象，无需逐个属性手动转换。

const person = ref({ name: 'John', age: 30 });
const toRefsPerson = toRefs(person);

toRef vs. toRefs：关键区别

虽然 toRef 和 toRefs 都用于响应式化数据，但它们有一些关键区别：

toRef 仅适用于基本数据类型，而 toRefs 适用于对象。
toRef 返回一个响应式数据，而 toRefs 返回一个包含响应式数据属性的对象。
toRef 语法简单，而 toRefs 语法更复杂。

示例：使用 toRef 和 toRefs

下面是一个使用 toRef 和 toRefs 响应化数据的示例：

<template>
  <div>
    <h1>{{ person.name }}</h1>
    <p>{{ person.age }}</p>
  </div>
</template>

<script>
import { ref, toRefs } from 'vue'

export default {
  setup() {
    const person = ref({ name: 'John', age: 30 })

    const toRefsPerson = toRefs(person)

    return {
      toRefsPerson
    }
  }
}
</script>