Vue 3中的Composition API实践：如何封装可复用逻辑

作者：Sanakey2023.09.30来源：Web前端之家浏览：1684评论:0

关键词：Vue 3

Composition API 是 Vue 3 中的一项重要功能，它带来了一种新的方式来组织和复用逻辑代码。在传统的 Options API 中，我们将组件的功能按照生命周期钩子函数来拆分，而 Composition API 则基于函数式编程的思想，允许我们更灵活地定义可复用的逻辑。

1. 引言

在日常开发中，我们经常会遇到一些功能需求，在多个组件间需要进行共享和复用。而通过 Composition API，我们可以将这些功能逻辑封装为一个单独的函数，然后在多个组件中引用它，从而实现代码的重用。

2. 编写可复用逻辑

在 Composition API 中，我们可以使用 setup 函数来编写可复用逻辑。通过在 setup 函数中返回一个包含多个响应式数据和方法的对象，我们可以在组件内部使用这些数据和方法。

下面以一个计数器组件为例，来演示如何封装可复用逻辑：

import { ref } from 'vue'

export function useCounter() {
  const count = ref(0)

  function increment() {
    count.value++
  }

  function decrement() {
    count.value--
  }

  return {
    count,
    increment,
    decrement
  }
}

在上面的代码中，我们定义了一个名为 useCounter 的函数，在函数内部使用 ref 创建了一个响应式的变量 count，并且定义了两个方法 increment 和 decrement 来增加和减少计数器的值。最后，我们通过返回一个包含 count、increment 和 decrement 的对象来将这些数据和方法暴露给外部。

3. 在组件中使用可复用逻辑

在其他组件中想要使用刚才定义的可复用逻辑，只需在组件内部使用 setup 函数，并导入 useCounter 函数，然后调用它即可：

import { useCounter } from './useCounter'

export default {
  setup() {
    const { count, increment, decrement } = useCounter()

    return {
      count,
      increment,
      decrement
    }
  }
}

在上面的示例中，我们首先导入了刚才定义的 useCounter 函数，然后在 setup 函数中调用它并将返回的对象解构为 count、increment 和 decrement。最后，我们通过将这些数据和方法返回给组件，使得在模板中可以直接使用。

4. 实践：封装可复用的表单验证逻辑

表单验证是前端开发中经常遇到的一个问题。通过 Composition API，我们可以将表单验证逻辑封装成一个可复用的函数，然后在多个组件中共享。

下面以一个简单的登录表单为例，来演示如何封装表单验证逻辑：

import { ref } from 'vue'

export function useFormValidation() {
  const username = ref('')
  const password = ref('')

  const usernameError = ref('')
  const passwordError = ref('')

  function validateForm() {
    if (!username.value) {
      usernameError.value = '请输入用户名'
    } else {
      usernameError.value = ''
    }

    if (!password.value) {
      passwordError.value = '请输入密码'
    } else {
      passwordError.value = ''
    }
  }

  return {
    username,
    password,
    usernameError,
    passwordError,
    validateForm
  }
}

在上面的代码中，我们定义了一个名为 useFormValidation 的函数，通过使用 ref 创建了多个响应式的变量来存储用户名、密码以及对应的错误信息。同时，我们定义了一个 validateForm 方法来进行表单验证，如果表单填写不合法，则会更新对应的错误信息。

在组件中使用这个可复用逻辑也非常简单：

import { useFormValidation } from './useFormValidation'

export default {
  setup() {
    const {
      username,
      password,
      usernameError,
      passwordError,
      validateForm
    } = useFormValidation()

    return {
      username,
      password,
      usernameError,
      passwordError,
      validateForm
    }
  }
}

通过调用 useFormValidation 函数并将返回的响应式变量和方法解构赋值给组件中的对应变量，我们可以在模板中直接使用这些数据和方法。