vue 3 响应式数据需手动与 localstorage 双向同步：初始化时读取赋值给 ref，变更时先更新 ref 再写入 localstorage，并通过 storage 事件监听跨标签页变化，推荐封装为 usesharedref 组合式函数。
Vue 3 的响应式数据本身不会自动感知 localStorage 的变化，必须手动建立“读取 → 响应式绑定”和“变更 → 写入 + 广播”两个通路。核心不是让 localStorage 变响应式，而是让响应式状态与 localStorage 保持双向同步，并在跨标签页时借助 storage 事件桥接。
初始化时从 localStorage 恢复响应式状态
组件挂载时，不能只靠计算属性现场读取 localStorage（那不是响应式的），而应把值读出来，赋给 ref 或 reactive：
- 用 ref 定义状态，例如
const theme = ref(localStorage.getItem('theme') || 'light') - 或在
setup()中显式读取并赋值：theme.value = localStorage.getItem('theme') || 'light' - 若使用
customRef，可在工厂函数中封装读取逻辑，首次访问即拉取
变更时同步写入 localStorage 并更新本地响应式
仅调用 localStorage.setItem() 不会触发 Vue 更新，必须确保：写操作既落盘，又驱动响应式更新：
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章