Composition API 本身不处理跨标签页同步，但可通过封装组合式函数整合 localStorage 读写、响应式更新与 storage 事件监听，实现本地响应式与跨页同步；推荐 useSharedRef 或 VueUse 的 useStorage，并注意 JSON 序列化、防抖、浅比较及双通道兜底。
Composition API 本身不处理跨标签页同步，但可以通过封装组合式函数，把 localStorage 读写、响应式更新、storage 事件监听三者有机整合，实现“本地响应式 + 跨页同步”的效果。关键不是让 Vue 自动同步，而是用函数主动桥接。
用 useSharedRef 封装双向绑定逻辑
这是最常用也最清晰的模式：一个组合函数同时管理 ref 响应式状态和 localStorage 持久化。
- 初始化时从 localStorage 读取值（有 fallback），赋给 ref
- ref 改变时，自动写入 localStorage（JSON 序列化）
- 监听全局 storage 事件，只对匹配 key 的变更反序列化并更新 ref
- 注意：当前页写入不会触发自己的 storage 事件，所以必须在 setItem 后手动更新 ref —— 这步不能省
避免无限循环和类型陷阱
localStorage 只支持字符串，且 storage 事件没有原子性，容易出错。
- 写入前做浅比较：newVal !== JSON.stringify(oldVal)，防止无意义触发
- 只传可 JSON 化的数据（避开 Date、RegExp、undefined、function）
- 不要在 storage 回调里直接调用 setItem；若需更新，先改 ref，再判断是否真要持久化
- 高频操作（如输入框实时存）建议加防抖，localStorage 是同步阻塞操作
借助 VueUse 的 useStorage 快速落地
如果你不需要自定义同步逻辑，@vueuse/core 提供了开箱即用的 useStorage。
- 它内部已处理了 ref 绑定、JSON 序列化、storage 事件监听
- 支持默认值、自定义序列化器（比如用 msgpack 替代 JSON）
- 跨标签页同步需额外加一层逻辑：useStorage 默认只监听 storage 事件，但不保证所有页面都用同一套封装 —— 所以团队内要统一使用，或配合 useSharedRef 自行增强
- 示例：const theme = useStorage('theme', 'light')，修改 theme.value 即同步到 localStorage 并通知其他页
补充：需要跨域或更可靠同步时换方案
localStorage + storage 事件只适用于同源多标签页，且不保证送达。
- 要求更高可靠性？用 BroadcastChannel（同源标签页广播，Safari 14.1+ 支持稳定）
- 要跨 iframe 或跨域？只能用 postMessage + 父子窗口通信
- 核心数据建议加兜底：localStorage 写入后，再发一次 BroadcastChannel 消息，双通道保障
