Vue 3 Composition API：构建可复用逻辑的艺术

Vue 3 引入了 Composition API，这是一种新的组件选项，允许开发者更灵活地组织组件逻辑。使用 Composition API，我们可以将组件逻辑分解为可复用的函数，从而提高代码的模块化和可维护性。本文将详细介绍如何使用 Vue 3 的 Composition API 创建可复用的逻辑。

一、Composition API 简介

Composition API 提供了一系列的函数，如 setup、reactive、ref、computed、watch 等，这些函数可以在 setup 函数中使用，以声明性地描述组件的逻辑。

二、基本的 Composition API 使用

在 Vue 3 中，每个组件都可以使用 setup 函数来组织逻辑。setup 是 Composition API 的入口，它在组件创建之前执行。

import { ref, computed } from 'vue';

export default {
  setup() {
    const count = ref(0);

    const doubleCount = computed(() => count.value * 2);

    function increment() {
      count.value++;
    }

    return { count, doubleCount, increment };
  }
};

三、创建可复用的逻辑

使用 Composition API，我们可以将逻辑封装在自定义的函数或组合式函数中，然后在多个组件中复用这些逻辑。

3.1 创建可复用的响应式状态

import { ref } from 'vue';

// 创建一个响应式状态的工厂函数
export function useResponsiveState(initialValue) {
  const state = ref(initialValue);
  return state;
}

3.2 创建可复用的计算属性

import { computed } from 'vue';

// 创建一个计算属性的工厂函数
export function useComputedProperty(dependencies, calculate) {
  return computed(() => calculate(...dependencies));
}

3.3 创建可复用的观察者

import { watch } from 'vue';

// 创建一个观察者的工厂函数
export function useWatcher(source, callback) {
  watch(source, (newValue, oldValue) => {
    callback(newValue, oldValue);
  });
}

四、使用工厂函数

在组件中使用这些工厂函数，可以轻松地复用逻辑。

import { useResponsiveState, useComputedProperty, useWatcher } from './composables';

export default {
  setup() {
    const state = useResponsiveState(0);

    const doubleState = useComputedProperty([state], (s) => s * 2);

    useWatcher(doubleState, (newValue, oldValue) => {
      console.log(`Double state changed from ${oldValue} to ${newValue}`);
    });

    function increment() {
      state.value++;
    }

    return { state, doubleState, increment };
  }
};

五、高级技巧

5.1 组合式函数的嵌套使用

组合式函数可以相互嵌套，创建更复杂的逻辑。

export function useComplexLogic(simpleState) {
  const derivedState = useComputedProperty([simpleState], (s) => s * 10);
  useWatcher(derivedState, (newValue, oldValue) => {
    // 执行更复杂的逻辑
  });
  return derivedState;
}

5.2 提供和注入

Vue 3 允许使用 provide 和 inject 在组件树中提供和使用数据。

import { provide, inject } from 'vue';

export default {
  setup() {
    const state = useResponsiveState(0);
    provide('state', state);

    // 在子组件中
    const injectedState = inject('state', ref(0));
    return { injectedState };
  }
};

5.3 使用 reactive 处理复杂状态

对于包含多个属性的复杂状态，可以使用 reactive 创建一个响应式对象。

import { reactive } from 'vue';

export function useComplexState() {
  const state = reactive({
    count: 0,
    message: 'Hello World'
  });
  return state;
}

六、结论

Vue 3 的 Composition API 提供了一种强大的方式来构建可复用的逻辑。通过使用工厂函数、组合式函数、provide 和 inject，以及 reactive，我们可以创建可维护、可测试和可复用的组件逻辑。本文详细介绍了 Composition API 的基本概念和高级技巧，希望能够帮助开发者更好地利用 Vue 3 的强大功能。