从一个 composable 开始,重新理解 Vue 的逻辑复用
不只是把代码搬出组件。聊聊状态的边界、生命周期与恰到好处的抽象。
示例文章,用于验证 Markdown 渲染。
抽象之前,先确认哪些状态应该共享。
export function useCounter() {
const count = ref(0)
return { count, increment: () => count.value++ }
}
小而明确的边界
一个 composable 可以只做一件事情。
| 维度 | 需要考虑的问题 |
|---|---|
| 状态 | 谁拥有它? |
| 生命周期 | 何时清理? |
- 明确状态归属
- 添加真实场景的测试
感谢阅读,愿你有所收获。继续探索