输入框内容变化时自动存入本地缓存，核心是监听数据变动并立即写入 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（即使只是字符串，也建议统一处理，避免后续扩展出错）：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
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 再写入，期间新变化会重置计时
- 注意：防抖后需在组件卸载前清理定时器，避免内存泄漏
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
