frontend-interview-playbook

Appearance

Composable 设计：逻辑复用、effectScope 与副作用收口 ​

机制定位 ​

Composable 的关键不是抽函数，而是建立稳定的状态与副作用边界。

  • Composable 的关键不是抽函数，而是建立稳定的状态与副作用边界
  • Composable 不是把选项式 API 换成几个函数，而是把一组状态、派生值和副作用收敛成可复用边界
  • 好的 composable 需要同时考虑参数输入、返回接口、生命周期和资源回收
  • 如果 composable 隐式注册大量事件、定时器或全局订阅，但没有清理策略，就会直接引发泄漏和竞态

参与者与职责 ​

  • Composable 的关键不是抽函数，而是建立稳定的状态与副作用边界
  • Composable 不是把选项式 API 换成几个函数，而是把一组状态、派生值和副作用收敛成可复用边界
  • 好的 composable 需要同时考虑参数输入、返回接口、生命周期和资源回收
  • 如果 composable 隐式注册大量事件、定时器或全局订阅，但没有清理策略，就会直接引发泄漏和竞态
  • Composable 内部通常组合 ref、reactive、computed、watch 和生命周期钩子，形成一组逻辑闭环

关键流程 ​

  • Composable 的关键不是抽函数，而是建立稳定的状态与副作用边界
  • Composable 不是把选项式 API 换成几个函数，而是把一组状态、派生值和副作用收敛成可复用边界
  • 好的 composable 需要同时考虑参数输入、返回接口、生命周期和资源回收
  • 如果 composable 隐式注册大量事件、定时器或全局订阅，但没有清理策略，就会直接引发泄漏和竞态
  • Composable 内部通常组合 ref、reactive、computed、watch 和生命周期钩子，形成一组逻辑闭环
  • effectScope 可以把一组 effect 纳入同一作用域，便于整体停止和回收，尤其适合插件式逻辑和手动创建的副作用组

关键数据结构或调度关系 ​

回答 - Composable 设计：逻辑复用、effectScope 与副作用收口 时，先交代它在 Vue Core 主链里解决什么问题，再按参与者、流程阶段、关键数据结构和边界条件展开，最后回到性能、调试或架构后果

  • Composable 设计：逻辑复用、effectScope 与副作用收口 背后通常都有一组关键容器或调度关系，它们决定性能边界

容易误解的边界 ​

  • Composable 的关键不是抽函数，而是建立稳定的状态与副作用边界
  • Composable 不是把选项式 API 换成几个函数，而是把一组状态、派生值和副作用收敛成可复用边界 回答 - Composable 设计：逻辑复用、effectScope 与副作用收口 时，先交代它在 Vue Core 主链里解决什么问题，再按参与者、流程阶段、关键数据结构和边界条件展开，最后回到性能、调试或架构后果
  • Composable 设计：逻辑复用、effectScope 与副作用收口 背后通常都有一组关键容器或调度关系，它们决定性能边界
  • Composable 设计：逻辑复用、effectScope 与副作用收口 这类问题不能只背定义，更要分清它解决的对象、内部机制和工程取舍。 Composable 的关键不是抽函数，而是建立稳定的状态与副作用边界。 Composable 不是把选项式 API 换成几个函数，而是把一组状态、派生值和副作用收敛成可复用边界。 Composable 内部通常组合 ref、reactive、computed、watch 和生命周期钩子，形成一组逻辑闭环。 Composable 解决逻辑复用，组件解决视图复用，Pinia 解决跨组件状态共享；三者不是同一层抽象。 搜索、分页、表单、轮询、媒体控制等复杂逻辑都适合用 composable 提炼，但前提是边界清晰。 追问通常会沿着 组件通信、生命周期和副作用管理 展开，重点在于把现象还原成系统行为

工程后果与调试抓手 ​

  • Composable 的关键不是抽函数，而是建立稳定的状态与副作用边界
  • Composable 不是把选项式 API 换成几个函数，而是把一组状态、派生值和副作用收敛成可复用边界
  • 好的 composable 需要同时考虑参数输入、返回接口、生命周期和资源回收
  • 如果 composable 隐式注册大量事件、定时器或全局订阅，但没有清理策略，就会直接引发泄漏和竞态
  • Composable 内部通常组合 ref、reactive、computed、watch 和生命周期钩子，形成一组逻辑闭环

问答设计及延伸 ​

标准回答 ​

回答 Composable 设计：逻辑复用、effectScope 与副作用收口 时，先说明它在 Vue Core 主链中解决的核心问题，再按参与者、流程阶段、关键数据结构和边界条件展开，最后落到性能、调试或架构后果。

追问拆解 ​

  • Composable 设计：逻辑复用、effectScope 与副作用收口 与“watch、watchEffect 与清理机制：竞态取消与 effect 生命周期”在主链中的职责分工
  • Composable 设计：逻辑复用、effectScope 与副作用收口 与“组件通信：props、emits、provide/inject 与状态提升”在主链中的职责分工
  • Composable 设计：逻辑复用、effectScope 与副作用收口 与“Pinia：状态建模、store 生命周期与类型推导”在主链中的职责分工
  • 规模增大后最先暴露瓶颈的阶段
  • 行为异常时优先检查的参与者、阶段与数据结构

容易失分的点 ​

  • 只会背术语，不会解释流程顺序
  • 把机制和工程结果混成一层
  • 忽略边界条件，导致结论过度绝对

项目映射 ​

  • 结合一次真实问题说明 Composable 设计：逻辑复用、effectScope 与副作用收口 如何帮助你定位 bug、性能问题或更新错序
  • 补充源码阅读或调试时看到的关键数据结构位置
  • 补充它和上下游模块的连接关系

相关主题 ​