用 watchEffect 实现输入框自动保存，首次挂载即恢复草稿并实时防抖保存：自动追踪 inputValue.value 变化，配合 onInvalidate 清除旧定时器，延迟 1.5 秒提交；通过 isSaving、saveError 和 AbortController 处理异步状态与竞态问题。
用 watchEffect 实现输入框内容自动保存，核心在于：它会自动追踪你读取的响应式变量（比如 inputValue.value），一有变化就立刻执行保存逻辑，且首次挂载时就会运行一次——这正好契合“打开页面即加载草稿 + 边输边存”的需求。
自动追踪输入值并触发保存
不需要手动写依赖数组，只要在 watchEffect 函数体内读取 ref 或 reactive 数据，Vue 就会自动监听它：
- 定义一个响应式输入值：
const inputValue = ref('') - 在
watchEffect中直接使用inputValue.value，哪怕只是打印或传给 API，它就被纳入依赖 - 每次用户输入，
inputValue更新 →watchEffect自动重跑 → 执行保存逻辑
避免高频请求：加节流和清理机制
用户快速打字时，watchEffect 可能每秒触发多次，直接发请求既浪费又易出错。推荐用 onInvalidate 配合定时器实现防抖：
Vue Composition Analyzer
下载
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
- 每次进入
watchEffect，先用onInvalidate清掉上一轮未执行的setTimeout - 设置 1.5 秒延迟再真正调用保存函数，确保用户停顿后再提交
- 这样既响应及时，又不会刷屏发请求
处理异步保存与状态反馈
保存是异步操作，需考虑失败、加载中、竞态等现实问题：
立即学习“前端免费学习笔记（深入）”；
- 定义
isSaving = ref(false)和saveError = ref(null)，在保存前后更新状态 - 用
AbortController中止前一次未完成的请求，防止旧响应覆盖新数据 - 可选：保存成功后本地缓存时间戳，页面卸载前检查是否还有未同步内容，做兜底提交
完整逻辑示例（关键片段）
不需额外挂载钩子，以下代码在组件创建后立即尝试恢复草稿，并在每次输入后约 1.5 秒自动保存：
- 首次运行：读取 localStorage，还原
inputValue - 后续变化：防抖触发
api.save({ content: inputValue.value }) - 错误时设
saveError.value = e.message，用户可见反馈
