Vue 3 组合式 API：更简单、更灵活的开发体验

前端

2024-01-14 14:37:20

Vue 3 组合式 API 概述

Vue 3 组合式 API 是一个新的 API，它为 Vue 应用程序的开发提供了更简单、更灵活的方式。它允许开发人员以更声明式的方式编写组件，并更好地控制组件的逻辑。

与选项式 API 相比，组合式 API 具有以下优点：

更简单：组合式 API 使用更少的代码来实现相同的功能，使得组件更容易编写和维护。
更灵活：组合式 API 允许开发人员更好地控制组件的逻辑，并更轻松地创建自定义组件。
更强大：组合式 API 提供了更强大的功能，如更好的类型支持和对 TypeScript 的支持。

组合式 API 的基本用法

组合式 API 的基本用法是使用 setup() 函数。setup() 函数是一个新的生命周期钩子，它在组件创建之前被调用。在 setup() 函数中，开发人员可以定义组件的逻辑，包括数据、方法和计算属性。

以下是一个使用组合式 API 编写的简单组件：

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

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

export default {
  setup() {
    const message = ref('Hello World!')

    const changeMessage = () => {
      message.value = 'New Message!'
    }

    onMounted(() => {
      console.log('Component mounted!')
    })

    return {
      message,
      changeMessage
    }
  }
}
</script>