组合式API逻辑复用实现

Tue, 04 Mar 2025 07:00:31 +0000

考察点分析

本题主要考核以下核心能力维度：

组合式API机制理解：考察对Vue3组合式API设计理念的掌握，包括逻辑拆分与复用策略
响应式系统运用：检验ref/reactive等响应式API的正确使用，及在组合函数中的值传递
生命周期整合：评估在自定义hook中正确绑定/清除副作用（如事件监听、异步请求）
代码抽象能力：验证业务逻辑解耦能力，包括参数处理、状态暴露、错误边界等工程化实践

具体技术评估点：

组合函数的命名规范与结构
响应式数据在组件间的状态保持
生命周期钩子的正确绑定
异步操作的竞态处理（如请求取消）
TypeScript类型支持实现

技术解析

关键知识点

Composition API Design > 响应式系统 > 生命周期管理 > TypeScript类型推导

原理剖析

组合函数本质是返回响应式状态+函数的闭包封装，利用Vue的setup()执行上下文实现逻辑复用。通过ref维持响应式引用，在onMounted等钩子中绑定原生事件或异步操作，通过onUnmounted进行资源清理，避免内存泄漏。

典型错误包括：

直接返回解构对象导致响应式丢失
未在卸载阶段移除事件监听
异步回调中使用过期状态

常见误区

在组合函数内直接修改DOM（违反响应式原则）
忘记处理异步操作的错误状态
多个组件实例共享同一响应式引用（未使用函数式返回）

问题解答

通过组合函数封装逻辑需遵循以下步骤：

创建以use开头的函数，使用ref/reactive封装状态
在setup阶段执行副作用（如事件绑定）
返回组件可用的响应式状态与方法
使用toRefs保持解构后响应式

鼠标跟踪器示例：

 import { ref, onMounted, onUnmounted } from 'vue'

export function useMouse() {
 const x = ref(0)
 const y = ref(0)
 
 const update = (e) => {
 x.value = e.pageX
 y.value = e.pageY
 }

 onMounted(() => {
 window.addEventListener('mousemove', update)
 })

 onUnmounted(() => {
 window.removeEventListener('mousemove', update)
 })

 return { x, y }
}

API请求示例：

逻辑抽象 on ZiYang FrontEnd Interview

组合式API逻辑复用实现

考察点分析 link

技术解析 link

关键知识点 link

原理剖析 link