Vue3.x实战教程：初识组合式API

2023-11-30 00:17:04

当然，以下是关于"Vue3.x 学习整理（一）"的博文。

初识组合式API

组合式API是Vue3.x中引入的一套全新的API，它为开发人员提供了一种更加灵活、高效的方式来构建Vue组件。与传统的选项式API不同，组合式API允许您将组件的逻辑拆分成更小的函数，然后像搭积木一样组合起来，从而创建出更易于维护和重用的组件。

组合式API的优势

组合式API具有以下几个优势：

灵活性强： 组合式API允许您将组件的逻辑拆分成更小的函数，然后像搭积木一样组合起来，从而创建出更易于维护和重用的组件。
代码的可读性高： 组合式API的代码往往更易于阅读和理解，因为它将组件的逻辑拆分成更小的函数，并使用清晰的命名约定。
可重用性强： 组合式API的函数可以很容易地被重用在不同的组件中，这使得代码更加简洁和易于维护。

组合式API的基本使用

要使用组合式API，您需要在Vue组件中定义一个setup函数。setup函数接收两个参数：props和context。props参数包含组件的属性，而context参数包含一些有用的API，例如emit函数和ref函数。

在setup函数中，您可以使用组合式API的各种函数来构建组件的逻辑。例如，您可以使用ref函数来创建响应式数据，可以使用computed函数来创建计算属性，可以使用watch函数来创建侦听器，可以使用onMounted函数来创建生命周期钩子，等等。

组合式API的示例代码

以下是一个使用组合式API创建组件的示例代码：

<template>
  <div>
    <h1>{{ name }}</h1>
    <p>{{ message }}</p>
  </div>
</template>

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

export default {
  setup() {
    const name = ref('John Doe');
    const message = computed(() => {
      return `Hello, ${name.value}!`;
    });

    return {
      name,
      message
    };
  }
};
</script>