Composition API 是 Vue 3 的核心特性，通过 setup() 统一组织响应式数据、逻辑和生命周期，支持类型推导、逻辑复用（Composable）、provide/inject 跨层级状态管理，并天然契合 TypeScript。
Composition API 是 Vue 3 的核心特性之一，它让逻辑复用、代码组织和类型推导变得更自然、更可控。相比 Options API，它不依赖 this、生命周期钩子命名固定、逻辑按功能而非选项分组，特别适合中大型项目或需要跨组件共享逻辑的场景。
用 setup() 替代 Options 结构
所有响应式数据、方法、生命周期钩子都写在 setup() 函数内，返回的对象会自动暴露给模板。注意：setup 执行时机早于 beforeCreate 和 created，且内部没有 this。
- 响应式数据统一用 ref()（基础类型）或 reactive()（对象）声明
- 计算属性用 computed()，监听用 watch() 或 watchEffect()
- 生命周期钩子前缀加 on，如 onMounted、onUpdated，需在 setup 中调用
抽离逻辑为可复用的 组合函数（Composable）
把一组相关逻辑（比如表单校验、滚动监听、API 请求）封装成独立函数，参数接收 reactive 对象或 ref，返回需要暴露的数据和方法。
- 函数名建议以 use 开头，如 useUserList、useFormValidation
- 内部可调用其他组合函数，形成逻辑嵌套，但避免副作用交叉
- 保持单一职责，一个函数解决一类问题，便于测试和替换
合理使用 provide / inject 管理跨层级状态
当多个子组件需要访问同一份状态或方法时，可用 provide 在父组件注入，子组件用 inject 获取。Composition API 中推荐用 Symbol 做 key，避免命名冲突。
Wjs Localizing Video
下载
用于端到端视频本地化流程的轻量编排器，路由至四个专注子技能——/wjs-transcribing-audio、/wjs-translating-subtitles...
立即学习“前端免费学习笔记（深入）”；
- inject 返回值默认是 undefined，建议提供默认值或使用 inject(key, defaultVal)
- 如果注入的是响应式对象，子组件修改会直接影响源头；如需只读，可用 readonly() 包裹
- 避免过度依赖 provide/inject 替代 props，仍应优先通过明确的父子通信传递必要数据
配合 TypeScript 提升开发体验
Composition API 天然契合 TypeScript：setup 的返回值、ref 的泛型、composable 的函数签名都能被准确推导。
- 定义 ref 时尽量标注类型，如 const count = ref
(0) - 组合函数导出接口时，用 interface 或 type 明确输入输出结构
- watch 和 computed 的回调参数也能获得完整类型提示，减少运行时错误
重构不是为了换写法而换，而是让逻辑更聚、复用更稳、协作更清。从一个组件开始尝试，逐步沉淀自己的组合函数库，比一次性全量迁移更可持续。
