Vue 3 Composition API进阶指南

在上一篇文章中，我们介绍了Vue 3的Composition API基础，包括如何使用setup函数、ref和reactive来创建响应式数据，以及使用watchEffect来监控数据变化。本文将继续深入探讨Composition API的高级用法，帮助你更好地理解和利用Vue 3的新特性。

组合多个Hooks

在实际开发中，我们经常需要组合使用多个自定义的Hooks来实现复杂的功能。Vue 3的Composition API提供了这样的灵活性。下面通过一个简单的例子来展示如何组合多个Hooks。

示例：动态表单验证

假设我们需要创建一个表单组件，该组件需要对用户的输入进行实时验证，并在验证失败时显示错误信息。我们可以使用多个Hooks来组织这个功能：

<template>
  <div>
    <input v-model="username" placeholder="Username" />
    <span v-if="usernameError">{{ usernameError }}</span>
    <input v-model="email" placeholder="Email" />
    <span v-if="emailError">{{ emailError }}</span>
    <button :disabled="!isValid" @click="submitForm">Submit</button>
  </div>
</template>

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

function useValidation(value, rules) {
  const error = ref('');
  const valid = ref(true); // 使valid成为一个响应式引用

  watchEffect(() => {
    let localValid = true;
    for (const rule of rules) {
      const validationResult = rule(value.value);
      if (validationResult !== true) {
        error.value = validationResult.message;
        localValid = false;
        break;
      }
    }
    valid.value = localValid; // 更新valid的值
  });

  return { error, valid };
}

export default {
  setup() {
    const username = ref('');
    const email = ref('');

    const usernameRules = [
      value => !!value || { message: 'Username is required.' },
      value => (value && value.length >= 5) || { message: 'Username must be at least 5 characters.' }
    ];

    const emailRules = [
      value => !!value || { message: 'Email is required.' },
      value => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value) || { message: 'Invalid email format.' }
    ];

    const { error: usernameError, valid: usernameIsValid } = useValidation(username, usernameRules);
    const { error: emailError, valid: emailIsValid } = useValidation(email, emailRules);

    const isValid = computed(() => usernameIsValid.value && emailIsValid.value);

    function submitForm() {
      if (isValid.value) {
        console.log('Form submitted!');
      } else {
        console.log('Form is not valid.');
      }
    }

    return {
      username,
      email,
      usernameError,
      emailError,
      isValid,
      submitForm
    };
  }
};
</script>

解释：

1. 验证规则：

   • 每个验证规则函数应该返回一个布尔值或一个带有message属性的对象。如果验证失败，返回的对象应该包含一个message属性。

2. watchEffect的回调：

   • 在watchEffect的回调函数中，我们遍历所有规则并检查每个规则的返回值。如果任何一个规则返回非true值，就认为验证失败，并更新error和localValid。
   • 最终将localValid的值赋给valid.value。

3. 计算属性isValid：

   • isValid是一个computed属性，它依赖于usernameIsValid和emailIsValid的状态。只有当这两个状态都是true时，isValid才是true。

4. 提交按钮的禁用逻辑：

   • 提交按钮的disabled属性绑定到了!isValid，确保只有在表单有效时按钮才能被点击。

在这个例子中，我们定义了一个useValidation函数作为自定义Hook，它接受一个值和一组验证规则，然后返回一个表示是否有错误的信息和一个布尔值表示是否有效。我们在setup函数中分别使用这个Hook来验证用户名和邮箱地址，并将结果暴露给模板使用。

使用Computed属性

除了watchEffect之外，Vue 3还提供了computed函数，用于计算基于其他响应式状态的新状态。这对于需要根据多个源数据计算得出的结果特别有用。

示例：复杂计算

假设我们需要根据用户输入的数值计算一些统计数据，比如平均值、最大值和最小值：

<template>
  <div>
    <input v-model="numbers" placeholder="Enter numbers separated by commas" />
    <p>Average: {{ average }}</p>
    <p>Max: {{ max }}</p>
    <p>Min: {{ min }}</p>
  </div>
</template>

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

export default {
  setup() {
    const numbers = ref('');

    const parsedNumbers = computed(() => {
      return numbers.value.split(',').map(Number).filter(n => !isNaN(n));
    });

    const average = computed(() => {
      const nums = parsedNumbers.value;
      return nums.reduce((acc, cur) => acc + cur, 0) / nums.length;
    });

    const max = computed(() => Math.max(...parsedNumbers.value));

    const min = computed(() => Math.min(...parsedNumbers.value));

    return {
      numbers,
      average,
      max,
      min
    };
  }
};
</script>

在这个例子中，我们定义了一个numbers输入框，用户可以输入逗号分隔的数字。我们使用computed来计算平均值、最大值和最小值，并将这些值暴露给模板使用。

结语

通过本文的学习，我们进一步掌握了Vue 3 Composition API的一些高级用法，包括如何组合多个Hooks、使用computed属性来计算响应式状态。这些技术可以帮助你在实际项目中更好地组织组件逻辑，提高代码的可维护性和可读性。

在接下来的文章中，我们将继续深入探讨Vue 3的其他特性和最佳实践，帮助你成为更高效的Vue开发者。如果你有任何问题或想要分享的经验，请在评论区留言。