Vue3 使用 Composition API 优化代码量的方法

在Vue 3开发中，Composition API成为优化代码量、提升代码可维护性的强大工具。它允许开发者将相关逻辑组合在一起，打破传统Options API中逻辑分散的局限。

响应式数据的处理更为简洁。在传统的Options API里，定义响应式数据需要在data函数中进行。而使用Composition API，可以通过ref和reactive来轻松创建响应式数据。例如，import { ref } from 'vue'; const count = ref(0);，ref会将基本数据类型包裹成响应式，使用起来一目了然。对于对象类型的数据，reactive能创建深度响应式对象，import { reactive } from 'vue'; const user = reactive({ name: '', age: 0 });，这样的写法比在data函数里定义更加直观和紧凑。

逻辑复用变得轻而易举。在Vue项目中，常常会遇到多个组件需要共享逻辑的情况。在Options API中，通常会使用混入（mixin）来实现，但混入可能导致数据来源不清晰。Composition API通过自定义组合函数来解决这一问题。例如，创建一个用于处理倒计时的组合函数：

import { ref, onMounted, onUnmounted } from 'vue';
export function useCountdown(initialTime) {
  const time = ref(initialTime);
  let timer;
  const startCountdown = () => {
    timer = setInterval(() => {
      time.value--;
      if (time.value === 0) {
        clearInterval(timer);
      }
    }, 1000);
  };
  onMounted(() => {
    startCountdown();
  });
  onUnmounted(() => {
    clearInterval(timer);
  });
  return {
    time
  };
}

在组件中使用时，import { useCountdown } from './useCountdown'; const { time } = useCountdown(60);，极大地提高了代码的复用性，减少了重复代码。

生命周期钩子函数的使用更加灵活。在Composition API中，onMounted、onUpdated、onUnmounted等钩子函数可以直接在setup函数中使用，无需像Options API那样在组件选项中定义。这使得相关逻辑可以集中在一起，代码结构更加清晰。

Vue 3的Composition API通过更简洁的响应式数据处理、高效的逻辑复用以及灵活的生命周期钩子使用，为开发者提供了优化代码量、提升开发效率的有效途径，让Vue项目的代码更加简洁、可维护。