学习 Vue

第 5 章 组成应用程序接口

本作品已使用人工智能进行翻译。欢迎您提供反馈和意见：[e-mail]

在上一章中，您学习了如何使用经典的 Options API 来组合 Vue 组件。尽管它是自 Vue 2 以来最常用的 Vue 组件合成 API，但使用 Options API 可能会导致不必要的代码复杂性、大型组件代码的不可读性以及它们之间的逻辑重用性。针对此类用例，本章将介绍另一种合成 Vue 组件的方法--Composition API。

在本章中，我们将探索不同的组合钩子，以便在 Vue 中创建功能性有状态元素。我们还将学习如何结合 Options API 和 Composition API 来实现更好的反应式控制，并为我们的应用程序编写自己的可重用可组合元素。

使用合成 API 设置组件

在 Vue 中，使用选项 API 组合组件是一种常见的做法。然而，在许多情况下，我们希望重用组件的部分逻辑，而不必担心数据和方法的重叠（如在 mixins 中）。¹或一个更可读、更有条理的组件。在这种情况下，Composition API 可以提供帮助 。

在 Vue 3.0 中引入的 Composition API 提供了一种借助setup() 钩子（"setup"）或<script setup> 标签来组合有状态组件和反应式组件的替代方法。setup() 钩子是组件选项对象的一部分，在初始化和创建组件实例之前运行一次（在beforeCreate() 钩子之前）。

您只能在此钩子或等效语法<script setup> 标签中使用 Composition API 函数或可组合组件（"创建可重用的可组合组件"）。这种组合创建了一个有状态的功能组件，并为定义组件的反应状态和方法以及初始化其他生命周期钩子（请参阅"使用生命周期钩子"）提供了一个极好的位置，使代码更加直观易读。

让我们从ref() 和reactive() 函数开始，探索 Composition API 的强大功能，以处理组件的反应数据。

使用 ref() 和 reactive() 处理数据

在第 2 章中，我们学习了选项 API 中用于初始化组件数据的data() 函数属性（"使用数据属性创建本地状态"）。从data() 返回对象中的所有数据属性都是反应式的，这意味着 Vue 引擎会自动观察每个已声明数据属性的变化。但是，如果您有很多数据属性，其中大部分都是静态的，那么这种默认功能可能会给您的组件带来开销。在这种情况下，Vue 引擎仍会为这些静态值启用监视器，这是不必要的。为了限制过多的数据监视器的数量，并对哪些数据属性需要观察有更多的控制，Vue 在 Composition API 中引入了ref() 和reactive() 函数 。

使用 ref()

ref() 是一个函数，它接受一个参数，并返回一个以该参数为初始值的反应对象。我们称这个返回对象为 对象：ref

import { ref } from 'vue'

export default {
  setup() {
    const message = ref("Hello World")
    return { message }
  }
}

或在<script setup> ：

<script setup>
import { ref } from 'vue'

const message = ref("Hello World")
</script>

然后，我们可以通过script 部分中的单个