用 watcheffect 实现自动保存草稿需四步:监听响应式 content 并自动追踪依赖;加入 800ms~1.5s 防抖避免频繁请求;通过 isinitialized 区分初始化赋值与用户编辑;配合 savestatus 提供“保存中/已保存/失败”状态反馈,并用清理函数取消未完成定时器。

用 watchEffect 实现自动保存草稿,核心在于监听编辑内容变化并触发防抖保存逻辑——它比手动 watch 更简洁,且能自动追踪响应式依赖。
监听编辑器内容变化
只要编辑器内容(如 ref 或 computed)是响应式的,watchEffect 就能自动捕获其读取行为,并在下次变化时重新执行:
- 把编辑器的 value 绑定到一个
ref(例如content),确保它是响应式源 - 在
watchEffect内部直接读取content.value,无需显式指定监听路径 - 避免在回调中修改被监听的值,否则可能引发循环触发
加入防抖,避免频繁请求
每次输入都发请求既不必要也不友好,必须加防抖控制实际保存时机:
- 用
setTimeout+clearTimeout手动实现轻量防抖,或封装成可复用的useDebounceFn - 推荐防抖延迟 800ms~1.5s:太短仍会高频触发,太长影响“自动保存”感知
- 在
watchEffect回调中调用防抖函数,而不是直接发起请求
区分用户操作与初始化加载
首次加载草稿时赋值不应触发保存,否则会覆盖服务端最新版本:
- 用一个
isInitialized标志位,在数据首次从接口读取并赋值后设为true - 在
watchEffect内部检查该标志,仅当isInitialized为true时才执行保存逻辑 - 也可用
onMounted延迟启动watchEffect,但需注意响应式依赖是否已就绪
提供用户可见的保存状态反馈
自动保存是隐形操作,用户需要明确知道“已保存”或“保存中”:
- 维护一个
saveStatus状态(如'idle' | 'saving' | 'saved' | 'error') - 在防抖函数触发请求前设为
'saving',成功后设为'saved',失败后设为'error' - 配合 UI 显示微提示(如右上角小 toast 或编辑器底部状态栏),2 秒后自动恢复为
'idle'
不复杂但容易忽略:watchEffect 的清理函数可用于取消未完成的防抖定时器或 pending 请求,让逻辑更健壮。










