Vue3组件复用策略：提取公共逻辑的最佳实践

在Vue3应用开发中，组件复用是提升开发效率和代码质量的关键策略。本文将深入探讨如何通过提取公共逻辑实现组件的高效复用。

核心复用策略

1. Composable函数模式

Vue3的Composition API为逻辑复用提供了最佳实践。通过创建可复用的Composable函数，可以将业务逻辑从组件中抽离。

// composables/useApi.js
import { ref, reactive } from 'vue'

export function useApi(url) {
  const data = ref(null)
  const loading = ref(false)
  const error = ref(null)

  const fetch = async () => {
    loading.value = true
    try {
      const response = await fetch(url)
      data.value = await response.json()
    } catch (err) {
      error.value = err
    } finally {
      loading.value = false
    }
  }

  return { data, loading, error, fetch }
}

2. 组件封装与Props传递

通过合理设计组件接口，实现逻辑与UI的解耦。使用Props传递配置项，Slot提供渲染插槽。

<!-- components/DataTable.vue -->
<template>
  <div class="data-table">
    <table v-if="!loading">
      <slot name="header"></slot>
      <tbody>
        <tr v-for="row in data" :key="row.id">
          <slot name="row" :row="row"></slot>
        </tr>
      </tbody>
    </table>
    <div v-else>Loading...</div>
  </div>
</template>

<script setup>
import { useApi } from '@/composables/useApi'

const props = defineProps({
  url: String,
  columns: Array
})

const { data, loading, fetch } = useApi(props.url)

fetch()
</script>

3. 混入模式的替代方案

虽然Vue3移除了混入，但可通过组合式API实现类似功能。通过创建通用的配置函数，避免重复代码。

实践建议

1. 单一职责原则：每个Composable只负责一个特定功能
2. 类型安全：使用TypeScript增强代码可维护性
3. 测试友好：确保复用逻辑易于单元测试

通过以上策略，可以构建出高内聚、低耦合的Vue3应用架构，提升团队开发效率。