Vue 教程：组合式函数（Composables）的设计模式与复用技巧

快速概述

组合式函数（Composables）是 Vue 3 组合式 API 的核心产物，用于将组件内的响应式状态和业务逻辑抽取为可复用的独立模块，解决跨组件逻辑复用难题。它适用于复杂表单、数据请求、状态同步等场景。前置要求：熟悉 Vue 3 组合式 API（setup 语法）与响应式基础（ref、reactive、computed）。

核心概念与原理

组合式函数本质是一个利用 Vue 响应式系统、以函数形式组织的逻辑单元。它通过 ref 或 reactive 声明状态，通过 computed 派生数据，通过 watch 响应变化，并返回暴露给组件的状态与方法。其设计模式遵循“单一职责”与“关注点分离”，将可复用的逻辑从组件中解耦，组件仅负责视图与交互编排。

实战步骤与代码

以下演示创建一个管理用户列表的组合式函数。

1. 创建项目：运行 vue create vue-demo 创建项目，进入目录并执行 npm run serve 启动。
2. 定义组合式函数：在 src/composables/useUserList.js 中编写逻辑。

// useUserList.js
import { ref, computed } from 'vue'
// 导出组合式函数 export function useUserList() { // 使用 ref 定义响应式状态 const users = ref([]) const keyword = ref('')
// 使用 computed 创建派生状态 const filteredUsers = computed(() => { return users.value.filter(user => user.name.includes(keyword.value) ) })
// 定义方法 const addUser = (name) => { users.value.push({ id: Date.now(), name }) }
const removeUser = (id) => { users.value = users.value.filter(user => user.id !== id) }
// 返回状态与方法供组件使用 return { users, keyword, filteredUsers, addUser, removeUser } }

3. 在组件中使用：在 setup 中调用并解构。

<template> <div> <input v-model="keyword" placeholder="搜索用户" /> <ul> <li v-for="user in filteredUsers" :key="user.id"> {{ user.name }} <button @click="removeUser(user.id)">删除</button> </li> </ul> <button @click="addUser('新用户')">添加</button> </div> </template>

<script> import { useUserList } from './composables/useUserList'
export default { setup() { // 解构使用组合式函数 const { users, keyword, filteredUsers, addUser, removeUser } = useUserList() return { users, keyword, filteredUsers, addUser, removeUser } } } </script>

常见坑点与优化

• 响应式丢失：解构组合式函数返回的 ref 对象时，若直接解构 users（非 ref 包装）会丢失响应性，应始终通过 .value 访问或保持引用。
• 副作用清理：在组合式函数中使用 watch 或事件监听时，应返回清理函数或在 onUnmounted 中取消，避免内存泄漏。
• 性能优化：避免在组合式函数中创建不必要的响应式对象；对于复杂计算，优先使用 computed 缓存结果；对于大型列表，考虑使用 shallowRef 或 markRaw 减少响应式开销。