vue.js 中的 watch 可实现响应式数据自动持久化：监听目标数据并序列化存入 localstorage，初始化时读取恢复，推荐封装为 uselocalstorage composable 统一处理读写、异常及多标签页同步。
Vue.js 中的 watch 可以监听响应式数据变化，并在变化时执行自定义逻辑，配合 localStorage 就能实现数据的自动持久化存储与读取。关键在于：监听目标数据、序列化后存入 localStorage、初始化时从 localStorage 恢复。
监听指定数据并写入 localStorage
使用 watch 监听需要持久化的响应式变量（如用户设置、表单状态等），在回调中调用 localStorage.setItem() 存储。注意必须将非字符串类型（如对象、数组）用 JSON.stringify() 序列化。
- 推荐使用对象形式的
watch，开启immediate: true和deep: true（针对对象/数组） - 避免监听整个
data或大型响应式对象，防止频繁写入影响性能 - 示例：监听用户主题偏好
theme
theme: {
handler(newVal) {
localStorage.setItem('user-theme', newVal);
},
immediate: true
}
}
组件初始化时从 localStorage 恢复数据
在 created 或 setup（组合式 API）中读取 localStorage 并赋值给响应式变量，确保页面刷新后状态不丢失。
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章