深层嵌套对象持久化需先toRaw剥离响应式再序列化，读取后用reactive/ref重建响应式；推荐封装useStorage Hook自动处理序列化、存储与响应式恢复。

深层嵌套对象的持久化存储，核心在于“序列化前剥离响应式代理，反序列化后重新建立响应式”。Vue 3 的 ref 和 reactive 对象在 JSON.stringify 时会丢失数据（返回空对象或报错），根本原因是 Proxy 代理无法被原生 JSON 处理。

手动剥离响应式再序列化

使用 toRaw() 获取原始对象，再 JSON 序列化。适用于已知结构、嵌套不极深的场景：

• 对顶层 ref：用 toRaw(unref(myRef))
• 对 reactive 对象：直接 toRaw(obj)
• 注意：toRaw 不递归处理嵌套的 reactive/ref，需配合遍历工具（如 lodash 的 cloneDeep 预处理）

使用 markRaw + 自定义序列化逻辑

对明确不需要响应式的字段（如第三方类实例、DOM 节点、或仅作配置的数据），用 markRaw() 标记，避免被 proxy 包裹；再配合自定义 replacer 函数过滤掉不可序列化的属性：

jm-jsjkxyjs02-zlm-405

使用约定式提交（Conventional Commits）生成标准化的 Git 提交信息。适用于以下场景： (1) 暂存更改时需要提交信息； (2) 审查 diff 时希望获得结构化摘要； (3) 编写 PR 描述或变更日志（changelog）条目； (4) 用户明确要求“为本次更改编写提交信息”。 该功能会分析已暂存/未暂存的 diff，并生成按类型（type）划分范围的提交信息。

下载

• 例如：JSON.stringify(obj, (key, val) => typeof val === 'function' ? undefined : val)
• 可封装为工具函数，自动跳过 Symbol、undefined、函数、Proxy 实例等

持久化后重建响应式结构

从 localStorage 或 IndexedDB 读取 JSON 字符串后，不能直接赋值给 reactive/ref —— 否则新对象无响应性。应：

• 用 Object.assign() 或展开运算符合并到现有响应式对象中（适合浅层）
• 对深层还原，推荐使用 lodash.set() 或手写递归赋值，再用 proxyRefs / shallowRef 按需包装关键层级
• 更稳妥的方式：用 ref(JSON.parse(str)) 创建新 ref，再通过 watch 或事件触发 UI 更新

推荐方案：封装成可复用的响应式持久化 Hook

例如 useStorage(ref, key, { serializer, deserializer })，内部自动完成：

• 写入时：toRaw → 序列化 → 存 localStorage
• 读取时：解析 JSON → 用 reactive() 或 ref() 包装 → 同步到目标响应式变量
• 支持 deep watch，变更时自动保存（可节流防频繁写入）