Vue3进阶：Composition API的使用方法

在Vue 3的生态体系中，Composition API成为开发者提升开发效率与代码质量的关键工具。理解并熟练运用Composition API，能让我们在构建复杂应用时更加得心应手。

Composition API的核心优势在于它打破了Vue 2中Options API的局限性，让逻辑复用变得轻而易举。在Options API里，相关的逻辑可能分散在data、methods、computed等不同的选项中，这使得代码维护和逻辑复用变得困难。而Composition API通过函数将相关逻辑聚合在一起，提高了代码的可维护性和复用性。

使用Composition API，首先要了解的是响应式原理。在Vue 3中，通过reactive和ref函数来创建响应式数据。reactive用于创建一个响应式对象，而ref则用于创建一个响应式的基本数据类型或对象。例如：

import { reactive, ref } from 'vue';
const state = reactive({
  message: 'Hello Vue 3'
});
const count = ref(0);

在模板中，我们可以直接使用这些响应式数据，Vue会自动追踪它们的变化并更新DOM。

计算属性和监听器在Composition API中也有新的实现方式。computed函数用于创建计算属性，watch函数用于监听数据的变化。比如：

import { computed, watch } from 'vue';
const doubleCount = computed(() => count.value * 2);
watch(count, (newValue, oldValue) => {
  console.log(`Count changed from ${oldValue} to ${newValue}`);
});

Composition API还支持自定义钩子函数。我们可以将一些通用的逻辑封装成自定义钩子函数，在不同的组件中复用。例如，创建一个用于获取数据的钩子函数：

import { ref } from 'vue';
function useFetch(url) {
  const data = ref(null);
  const error = ref(null);
  const fetchData = async () => {
    try {
      const response = await fetch(url);
      data.value = await response.json();
    } catch (e) {
      error.value = e;
    }
  };
  return { data, error, fetchData };
}

在组件中使用这个钩子函数：

import { defineComponent } from 'vue';
import useFetch from './useFetch';
export default defineComponent({
  setup() {
    const { data, error, fetchData } = useFetch('https://api.example.com/data');
    fetchData();
    return { data, error };
  }
});

通过这些方法，我们能够充分利用Composition API的强大功能，构建出更加高效、可维护的Vue 3应用程序。