Vue3 的 ref、toRef 和 toRefs：Composition API 的核心概念

2024-01-30 21:25:41

引述

Composition API 是 Vue3 中的一项革命性新增功能，它引入了一套新的概念和 API，使开发者能够以更简洁、更模块化的方式编写组件。其中，ref、toRef 和 toRefs 是 Composition API 的核心特性，它们提供了管理响应式数据和构建复杂组件的强大工具。

1. ref：访问响应式数据

ref 是一个函数，用于创建响应式引用。它接受一个可变值作为参数，并返回一个响应式包装对象。该包装对象提供了一个.value 属性，它指向原始值的响应式版本。

import { ref } from 'vue'

const count = ref(0)

2. toRef：将响应式值暴露给模板

toRef 接受一个响应式对象作为参数，并返回一个指向该对象特定属性的响应式引用。这允许我们轻松地在模板中访问响应式数据，而无需使用 .value 访问器。

import { toRef } from 'vue'

const data = {
  name: 'John',
  age: 25
}

const nameRef = toRef(data, 'name')

3. toRefs：将响应式对象转换为响应式引用对象

toRefs 接受一个响应式对象作为参数，并返回一个包含该对象所有属性响应式引用的新对象。这允许我们轻松地使用响应式语法访问对象属性，而无需显式使用 toRef。

import { toRefs } from 'vue'

const data = {
  name: 'John',
  age: 25
}

const { name, age } = toRefs(data)

实际应用

这些特性在构建复杂组件时特别有用，让我们可以轻松地管理组件状态和在组件之间共享数据。例如，我们可以创建一个计数器组件，使用 ref 跟踪计数，并使用 toRef 将计数公开给模板。

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

export default {
  setup() {
    const count = ref(0)
    return {
      count: toRef(count)
    }
  }
}
</script>

<template>
  <div>
    <button @click="count.value++">+</button>
    <span>{{ count }}</span>
  </div>
</template>