10 分钟 Composition API 快速入门：揭开 setup 语法糖的奥秘

引言

Composition API 是 Vue 3 中引入的一种革命性的状态管理方式。它以其直观性和可扩展性而著称，让开发人员能够以一种更简洁、更结构化的方式管理组件状态。在这篇文章中，我们将深入探讨 Composition API 中的 setup 语法糖，它是 Composition API 的核心概念。我们将了解 ref、computed 和 watch 函数，以及它们如何帮助你构建更强大的 Vue 组件。

认识 setup 语法糖

setup 语法糖是 Composition API 的核心，它允许我们在 setup 函数中返回一个对象来管理组件状态。这个对象可以包含 ref、computed 和 watch 函数，用于存储响应式数据、定义计算属性和监听响应式数据变化。

ref 函数

ref 函数用于创建响应式数据引用。它接受一个值作为参数，并返回一个可观察的 ref 对象。ref 对象提供了一个 .value 属性，用于访问和更新响应式数据。例如：

const count = ref(0);

computed 函数

computed 函数用于定义计算属性。它接受一个函数作为参数，该函数返回一个基于其他响应式数据的计算值。computed 函数中的值是自动更新的，当依赖项更改时。例如：

const doubledCount = computed(() => count.value * 2);

watch 函数

watch 函数用于监听响应式数据的变化。它接受两个参数：要监听的响应式数据和一个回调函数。当响应式数据发生变化时，回调函数会被触发。例如：

watch(count, (newValue, oldValue) => {
  console.log(`Count changed from ${oldValue} to ${newValue}`);
});

实际示例

让我们看一个实际示例来演示 Composition API 的强大功能。以下代码演示了一个简单的计数器组件：

<template>
  <button @click="increment">+</button>
  <p>{{ count }}</p>
</template>

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

export default {
  setup() {
    const count = ref(0);

    const increment = () => {
      count.value++;
    };

    return {
      count,
      increment,
    };
  },
};
</script>

在这个组件中，我们使用 ref 函数创建了一个名为 count 的响应式数据引用。我们还定义了一个 increment 方法来增加计数器。当按钮被点击时，increment 方法将被调用，导致 count 响应式数据的更新。该组件利用了 Composition API 的直观性，使我们能够以一种简洁、结构化的方式管理组件状态。

结论

Composition API 中的 setup 语法糖是一个强大的工具，它使开发人员能够以一种更简洁、更可扩展的方式管理组件状态。ref、computed 和 watch 函数允许你创建响应式数据、定义计算属性和监听响应式数据变化，从而使你可以构建更强大、更可维护的 Vue 组件。通过本篇文章，你现在可以自信地探索 Composition API 的世界，并体验它的全部好处。