Composition API优化技巧

Composition API 是 Vue 3 的核心特性之一，它提供了更灵活的逻辑组织和复用方式。相比于 Options API，Composition API 通过函数式编程让代码更清晰、更易于维护。以下是一些优化技巧，帮助你更好地利用 Composition API 提升开发效率。

合理拆分逻辑到自定义 Hook

将相关逻辑封装到自定义 Hook 中，可以显著提高代码的可读性和复用性。例如，处理表单验证的逻辑可以抽离成一个独立的 Hook：

// useFormValidation.js
import { ref, computed } from 'vue';

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

  const isUsernameValid = computed(() => username.value.length >= 3);
  const isPasswordValid = computed(() => password.value.length >= 6);

  return {
    username,
    password,
    isUsernameValid,
    isPasswordValid,
  };
}

在组件中使用时，只需引入并调用：

import { useFormValidation } from './useFormValidation';

export default {
  setup() {
    const { username, password, isUsernameValid, isPasswordValid } = useFormValidation();

    return {
      username,
      password,
      isUsernameValid,
      isPasswordValid,
    };
  },
};

使用 reactive 替代多个 ref

当需要管理多个相关状态时，使用 reactive 比多个 ref 更简洁。例如：

import { reactive } from 'vue';

const state = reactive({
  count: 0,
  name: 'Vue 3',
  isActive: false,
});

// 修改状态
state.count++;
state.name = 'Composition API';

利用 watch 和 watchEffect 高效监听变化

watch 和 watchEffect 是 Composition API 中监听状态变化的利器。watch 适合精确监听特定值的变化，而 watchEffect 会自动追踪依赖。

import { ref, watch, watchEffect } from 'vue';

const count = ref(0);

// 精确监听 count 的变化
watch(count, (newVal, oldVal) => {
  console.log(`count 从 ${oldVal} 变为 ${newVal}`);
});

// 自动追踪依赖
watchEffect(() => {
  console.log(`count 的值是 ${count.value}`);
});

使用 computed 优化派生状态

派生状态可以通过 computed 缓存计算结果，避免重复计算。例如：

import { ref, computed } from 'vue';

const price = ref(100);
const quantity = ref(2);

const total = computed(() => price.value * quantity.value);

console.log(total.value); // 200

组合式函数的异步处理

在组合式函数中处理异步逻辑时，可以使用 async/await 结合 ref 或 reactive：

import { ref } from 'vue';

export function useFetchData(url) {
  const data = ref(null);
  const error = ref(null);
  const isLoading = ref(false);

  async function fetchData() {
    isLoading.value = true;
    try {
      const response = await fetch(url);
      data.value = await response.json();
    } catch (err) {
      error.value = err;
    } finally {
      isLoading.value = false;
    }
  }

  return {
    data,
    error,
    isLoading,
    fetchData,
  };
}

利用 provide 和 inject 实现跨组件状态共享

Composition API 的 provide 和 inject 可以替代 Vuex 在小型应用中共享状态：

// 父组件
import { provide, reactive } from 'vue';

export default {
  setup() {
    const sharedState = reactive({
      theme: 'dark',
      user: { name: 'Alice' },
    });

    provide('sharedState', sharedState);
  },
};

// 子组件
import { inject } from 'vue';

export default {
  setup() {
    const sharedState = inject('sharedState');

    return {
      sharedState,
    };
  },
};

使用 toRefs 解构响应式对象

直接解构 reactive 对象会丢失响应性，toRefs 可以解决这个问题：

import { reactive, toRefs } from 'vue';

const state = reactive({
  count: 0,
  name: 'Vue',
});

const { count, name } = toRefs(state);

// 现在 count 和 name 仍然是响应式的

优化性能：避免不必要的响应式转换

将非响应式数据包裹为 ref 或 reactive 会增加开销。例如，静态配置数据可以直接使用普通对象：

// 不需要响应式
const config = {
  apiUrl: 'https://api.example.com',
  timeout: 5000,
};

// 需要响应式
const state = reactive({
  loading: false,
  data: null,
});

组合式函数中的生命周期钩子

在组合式函数中直接使用生命周期钩子，可以更灵活地管理副作用：

import { onMounted, onUnmounted } from 'vue';

export function useEventListener(target, event, callback) {
  onMounted(() => {
    target.addEventListener(event, callback);
  });

  onUnmounted(() => {
    target.removeEventListener(event, callback);
  });
}

类型推导与 TypeScript 支持

Composition API 对 TypeScript 的支持非常友好。通过泛型和接口，可以增强代码的类型安全：

import { ref } from 'vue';

interface User {
  id: number;
  name: string;
}

const user = ref<User>({
  id: 1,
  name: 'Alice',
});