Vue 组件设计模式：从高阶组件到组合式函数的演进

Vue 组件设计模式的核心目标是提升代码的可复用性、可维护性与可组合性。随着 Vue 3 的普及，组合式函数（Composables）逐渐取代高阶组件（HOC）成为主流方案，适用于跨组件逻辑抽取、状态共享与复杂交互场景。前置环境要求：Node.js 16+、Vue 3.2+，并建议使用 Vite 构建工具。

核心概念与原理

高阶组件是一种基于组件嵌套的设计模式，通过包装目标组件来增强其功能，但容易产生层级过深、命名冲突等问题。Vue 2.3 之后引入了函数式组件概念，用于无状态场景的轻量渲染。组合式函数则利用 Vue 3 的 Composition API，将相关逻辑封装为独立的函数，在组件内按需调用，实现逻辑复用与关注点分离。其核心机制是：通过 setup() 或 <script setup> 语法，将响应式状态、计算属性和方法组织为可组合单元，并由 Vue 的响应式系统自动追踪依赖。

实战步骤与代码

以下演示如何从高阶组件演进到组合式函数。首先，创建一个用于获取用户信息的组合式函数 useUser：

// composables/useUser.js
import { ref, onMounted } from 'vue'
export function useUser(id) { const user = ref(null) const loading = ref(false)
async function fetchUser() { loading.value = true try { // 模拟 API 请求 const res = await fetch(`/api/users/${id.value}`) user.value = await res.json() } finally { loading.value = false } }
onMounted(fetchUser) // 组件挂载时自动获取 return { user, loading, fetchUser } } 

接着，在组件中使用该组合式函数：

<script setup> import { useUser } from './composables/useUser' import { ref } from 'vue'

const userId = ref(1) const { user, loading } = useUser(userId) </script>
<template> <div v-if="loading">加载中...</div> <div v-else>{{ user?.name }}</div> </template> 

相比高阶组件，组合式函数无需修改组件树结构，逻辑更清晰，且天然支持 TypeScript 类型推导。若需在多个组件间共享状态，可结合 provide/inject 实现依赖注入，Vue 3 中可通过 provide 提供数据，inject 注入数据，实现跨层级通信。

常见坑点与优化

• 响应式丢失：在组合式函数中返回 ref 对象时，若直接解构会丢失响应性，应返回 ref 本身或使用 toRefs。
• 生命周期误用：组合式函数内的 onMounted 等钩子仅在组件上下文中生效，避免在普通函数中调用。
• 过度抽象：不要为单一使用场景强行抽取组合式函数，保持简单。
• 性能优化：对于大型列表，使用 v-memo 或 shallowRef 减少不必要的响应式追踪；对于异步操作，注意取消未完成的请求，避免内存泄漏。

策略模式在 Vue 中也有应用场景，例如根据不同类型动态渲染组件，可通过 <component :is> 结合策略对象实现。但组合式函数提供了更轻量的替代方案，优先推荐。