输入框内容变化时自动存入本地缓存，核心是监听数据变动并立即写入 localStorage；使用 watch 监听 v-model 绑定的响应式变量，保存前用 JSON.stringify 转字符串，读取时用 JSON.parse 并设默认值，页面加载时在初始化阶段恢复数据，可选加防抖避免高频写入。
输入框内容变化时自动存入本地缓存，核心是监听数据变动 + 立即写入 localStorage。不需要等提交、也不依赖额外库，Vue 自带的 watch 就够用。
监听 input 的 v-model 绑定值
只要 input 使用 v-model 绑定到响应式变量（比如 searchText），就可以直接监听这个变量：
- 在
setup中用watch监听 ref 或 reactive 字段 - 在 Options API 中，直接在
watch选项里配置 - 无需
deep: true—— 基本类型（字符串、数字）浅层监听即可触发
写入 localStorage 要转成字符串
localStorage 只接受字符串作为值，所以每次保存前必须用 JSON.stringify（即使只是字符串，也建议统一处理，避免后续扩展出错）：
localStorage.setItem('searchKey', JSON.stringify(searchText))- 读取时用
JSON.parse(localStorage.getItem('searchKey')) || ''，加默认值防 null - 如果值为空字符串或
null，JSON.parse会报错，所以推荐加 try-catch 或先判空
页面加载时恢复上次输入
在组件初始化阶段（如 onMounted 或 created）从 localStorage 读取并赋值：
立即学习“前端免费学习笔记（深入）”；
- 确保赋值发生在
v-model绑定之前，否则会被覆盖 - 例如：
searchText.value = JSON.parse(localStorage.getItem('searchKey') || '""') || '' - 如果用 Options API，可在
data()中直接读取：searchText: localStorage.getItem('searchKey') || ''
可选：防抖避免高频写入
用户狂敲键盘时，连续触发 watch 可能造成不必要的 I/O 操作。加个简单防抖更稳妥：
- 用
setTimeout+clearTimeout缓存上一次定时器 - 延迟 300ms 再写入，期间新变化会重置计时
- 注意：防抖后需在组件卸载前清理定时器，避免内存泄漏
