Vue Composition API 通过 ref + watch 或 reactive 封装本地存储，实现响应式数据与 localStorage 的自动同步，支持单值、对象及 SSR 安全的可复用 Composable。
Vue Composition API 本身不直接处理本地存储（如 localStorage），但它能轻松封装“读取→响应式绑定→写入同步”的完整流程，让本地数据像普通响应式状态一样自动更新视图、并持久化到浏览器存储中。
用 ref + watch 实现基础同步
这是最轻量、适合单个简单值（如主题模式、用户偏好）的方案：
- 用
ref创建响应式变量，初始值从localStorage.getItem()读取（注意类型转换） - 用
watch监听该 ref 的变化，触发localStorage.setItem() - 确保页面刷新后仍能读取上次保存的值——这靠初始化时的读取逻辑保证
示例代码：
import { ref, watch } from 'vue'<br><br>export function useLocalStorage(key, initialValue) {<br> const stored = localStorage.getItem(key)<br> const value = ref(stored ? JSON.parse(stored) : initialValue)<br><br> watch(value, (newValue) => {<br> localStorage.setItem(key, JSON.stringify(newValue))<br> }, { immediate: true })<br><br> return value<br>}
用 reactive 封装结构化数据
当需要同步一个对象（如用户设置 { theme: 'dark', lang: 'zh' }），用 reactive 更自然，但要注意：不能直接把 reactive 对象传给 watch 做深度监听（默认浅监听），需显式开启 deep: true：
Vue Composition Analyzer
下载
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
立即学习“前端免费学习笔记（深入）”；
- 先从
localStorage解析出对象，再传给reactive -
watch需设{ deep: true }才能捕获嵌套属性变更 - 为避免重复解析/序列化开销，可将读写逻辑抽成独立函数，便于复用
封装成可复用的 Composable（推荐）
真正实用的方式是写一个带错误防护和类型支持的自定义 Hook，例如 useStorage：
- 支持
localStorage和sessionStorage双后端切换 - 自动处理
JSON.stringify/parse，对非 JSON 值（如undefined、函数）静默忽略或抛警告 - 提供
remove方法，与clear语义分离 - 在 SSR 环境下安全降级（检查
typeof window !== 'undefined'）
这样多个组件只需导入同一函数，就能共享并响应同一份本地数据，无需额外状态管理库。
注意响应式边界与更新时机
几个容易踩坑的细节：
-
localStorage是同步 API，但 Vue 的响应式更新是异步的（nextTick），所以写入后立即读取可能拿不到最新 DOM 表现——这不是 bug，是预期行为 - 不同标签页间
storage事件不会触发当前页的 ref 更新，需手动监听window.addEventListener('storage', ...)并同步 ref - 不要把
localStorage.getItem()直接作为ref()参数——它返回字符串，而你通常需要解析后的值；否则后续赋值会丢失类型和结构
