Vue3中的组合式 API示例详解

当谈到使用Vue3开发现代web应用程序时，组合式API一直是一个备受关注的话题。组合式API是Vue3的新特性之一，它允许你创建可重用和高度抽象的组件逻辑，使得代码更易于维护和实现。本文将为您介绍什么是组合式API，提供两个组合式API示例，并展示如何在Vue3项目中使用组合式API。

组合式API概述

组合式API是Vue3中的新特性，它允许将组件逻辑分离并重用。相比Vue2中的选项API，组合式API更加灵活和强大，可以更好地处理代码逻辑。组合式API提供了一些函数和钩子，可以用于定义组件逻辑并在template中使用，从而避免了对选项对象的依赖。

组合式API有两个主要的概念：composables和hooks。Composables是一个工具函数集合，可以被各个组件中重复使用。Hooks则是一些特殊的函数，比如setup()，它被用于在组件中实现组合逻辑。在组件中，setup()函数是第一个执行的函数，即在mounted()之前执行。

下面展示两个组合式API示例。

组合式API示例1：异步加载数据

在这个示例中，我们将创建一个composables函数，用于从HTTP API异步加载数据，并使用setup()函数将其挂载到组件中。

// src/composables/useDataApi.js
import { ref, onMounted } from 'vue'
import axios from 'axios'

export default function useDataApi(requestUrl) {
  const data = ref(null)
  const isLoading = ref(false)
  const error = ref(null)

  onMounted(async () => {
    try {
      isLoading.value = true
      const response = await axios.get(requestUrl)
      data.value = response.data
    } catch (e) {
      error.value = e.message
    } finally {
      isLoading.value = false
    }
  })

  return { data, isLoading, error }
}

在代码中，我们使用了ref来创建响应式的数据、isLoading和error状态。在onMounted生命周期钩子函数中使用axios.get从API中异步加载数据，当数据加载完成后，数据存储在data变量中。如果发生了错误，错误信息保存在error变量中。isLoading用于显示/隐藏加载状态。

接下来，我们要在组件中使用useDataApi的逻辑。

<template>
  <div>
    <h1 v-if="isLoading">Loading...</h1>
    <div v-if="error">{{ error }}</div>
    <ul v-if="data">
      <li v-for="person in data.results" :key="person.id.value">
        {{ person.name.first }} {{ person.name.last }}
      </li>
    </ul>
  </div>
</template>

<script>
import useDataApi from '@/composables/useDataApi'

export default {
  setup() {
    const { data, isLoading, error } = useDataApi(
      'https://randomuser.me/api/?results=5'
    )

    return { data, isLoading, error }
  }
}
</script>

在代码中，我们调用了useDataApi函数，并将返回的值解构到data、isLoading和error变量中。然后在template中根据不同的状态进行展示。

组合式API示例2：验证表单数据

在这个示例中，我们将展示如何使用组合式API来验证表单数据。

// src/composables/useValidation.js
import { ref } from 'vue'

export default function useValidation() {
  const validateEmail = (email) => {
    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)
  }

  const validatePassword = (password) => {
    return password.length >= 8
  }

  const email = ref('')
  const password = ref('')
  const errors = ref([])

  const validate = () => {
    errors.value = []
    if (!validateEmail(email.value)) {
      errors.value.push('Please enter a valid email address.')
    }

    if (!validatePassword(password.value)) {
      errors.value.push('Password must be at least 8 characters long.')
    }

    return errors.value.length === 0
  }

  return { email, password, errors, validate }
}

在代码中，我们定义了两个函数：validateEmail和validatePassword，用于验证email和password是否合法。在composable中，我们使用ref创建email、password和errors状态。validate()函数用于在submit时调用，并返回errors列表以供显示。

接下来，我们来看看如何在组件中使用useValidation逻辑。

<template>
  <form @submit.prevent="validateForm">
    <label for="email">Email:</label>
    <input type="email" id="email" v-model.trim="email" required>
    <div v-if="errors.email" class="error">{{ errors.email[0] }}</div>

    <label for="password">Password:</label>
    <input type="password" id="password" v-model.trim="password" required>
    <div v-if="errors.password" class="error">{{ errors.password[0] }}</div>

    <button type="submit">Submit</button>
  </form>
</template>

<script>
import useValidation from '@/composables/useValidation'

export default {
  setup() {
    const { email, password, errors, validate } = useValidation()

    const validateForm = () => {
      if (!validate()) {
        return false
      }
      alert('Form is valid.')
    }

    return { email, password, errors, validateForm }
  }
}
</script>

在代码中，我们调用了useValidation函数，并将返回值解构到email、password、errors和validate变量中。在template中，我们使用v-model将表单的value与状态关联起来，并根据错误信息进行展示。在组件中，我们使用validate()函数验证表单数据，并在submit时判断是否验证通过。

到此，我们已经学习了如何使用组合式API来异步加载数据和验证表单数据的示例，并且了解了组合式API的概念和Vue3中如何使用组合式API。