Composition API 如何实现逻辑复用 - 前端面试题

在Vue.js的Composition API中，逻辑复用是通过使用可组合函数（composables）来实现的。可组合函数是可以封装和重用Vue组件逻辑的函数。Composition API引入了一种新的组织和重用组件逻辑的方式，它提供了更灵活的代码组织结构，使得函数的复用变得更加简单和清晰。

要实现逻辑复用，你可以按照以下步骤操作：

**创建可组合函数（composables）：**你可以创建一个独立的JavaScript函数，这个函数利用Composition API中的ref, reactive, computed, watch, watchEffect等响应性API来创建和管理状态或逻辑。
**在组件中使用可组合函数：**在Vue组件的setup函数中，你可以引入和使用这些可组合函数。这样，你就可以在多个组件之间共享和重用相同的逻辑，而无需复制代码。
**传递参数和返回值：**可组合函数可以接受参数并返回一些响应式引用、方法或其他值，这使得它们可以与组件进行交互并根据组件的需要进行调整。

下面我将通过一个简单的例子来说明这一过程：

假设我们有一个用于处理用户信息的逻辑，这部分逻辑需要在多个组件中复用。我们可以创建一个名为useUser的可组合函数来封装这部分逻辑。

javascript
// useUser.js
import { ref } from 'vue';

export function useUser() {
  const user = ref(null);
  const isLoading = ref(false);

  async function loadUser(userId) {
    isLoading.value = true;
    try {
      const response = await fetch(`/api/users/${userId}`);
      user.value = await response.json();
    } catch (error) {
      console.error('Failed to load user', error);
    } finally {
      isLoading.value = false;
    }
  }

  return { user, isLoading, loadUser };
}

在上面的例子中，useUser函数创建了一个用户信息的响应式引用user和一个加载状态的响应式引用isLoading。它还提供了一个异步函数loadUser来加载用户数据。

现在，我们可以在组件中使用这个可组合函数了：

javascript
// UserProfile.vue
<template>
  <!-- 使用user和isLoading渲染UI -->
</template>

<script>
import { onMounted } from 'vue';
import { useUser } from './useUser';

export default {
  setup() {
    const { user, isLoading, loadUser } = useUser();

    onMounted(() => {
      loadUser('123'); // 假设'123'是用户ID
    });

    return { user, isLoading };
  }
};
</script>

在UserProfile.vue组件的setup函数中，我们引入并调用useUser可组合函数，并在组件被挂载时调用loadUser函数来加载用户数据。这样，user和isLoading就可以在组件的模板中直接使用了。

这种方法不仅使得代码更加清晰和易于维护，而且还提高了代码的复用性。通过这种方式，我们可以将逻辑抽离出来，并在多个组件之间共享。