不依赖框架的状态管理核心是用JavaScript原生能力实现可预测、易追踪的状态变更。关键方式包括：手动维护全局状态+发布订阅、Proxy自动响应式、函数式atom单元，以及URL/localStorage持久化协同内存状态。
不依赖框架的状态管理，核心是用 JavaScript 原生能力控制数据的统一存储、变更通知和派生逻辑。关键不在“多高级”，而在“可预测”和“易追踪”——状态变更是显式的，谁改了、怎么改、改后影响谁，都要清晰。
手动维护全局状态对象 + 发布订阅
最轻量也最可控的方式：用一个纯对象存状态，配合事件机制通知变化。
- 定义一个 state 对象，只允许通过约定的方法修改（如
setState({ count: 1 })） - 内部用
Map或数组维护监听函数，每次 setState 后遍历触发notify() - 组件/模块调用
subscribe(callback)注册响应逻辑，callback 接收新旧 state 对比或完整快照 - 注意避免直接修改 state 对象（用
Object.assign({}, ...)或展开符做浅拷贝；深层嵌套建议用structuredClone或 immer-like 简化）
Proxy 封装实现自动响应式
利用 Proxy 拦截读写，省去手动 notify，适合中等复杂度场景。
- 用
new Proxy(state, { set, get })包裹原始状态 -
get中记录当前正在执行的副作用函数（类似 Vue 的依赖收集） -
set中触发所有关联该属性的回调 - 搭配
effect(fn)函数注册响应式逻辑，fn 内部读取 state 属性时自动建立依赖 - 缺点：Proxy 无法监听新增/删除属性（需用
Reflect.set配合has拦截），且对数组索引赋值、.length 修改等行为支持有限
基于函数式更新的原子状态单元（Atom）
受 Jotai / Zustand 启发，用闭包+函数组合管理独立状态片段，天然隔离、可复用。
立即学习“Java免费学习笔记（深入）”；
- 每个 atom 是一个函数：
const countAtom = atom(0)，返回{ get, set, subscribe } -
get()读取当前值；set(value | updaterFn)更新；subscribe(fn)监听变化 - 多个 atom 可组合（例如
const doubleCount = atom(get => get(countAtom) * 2)），自动追踪依赖 - 所有逻辑在 JS 运行时内完成，无编译要求，调试友好，适合渐进式接入
URL + localStorage 作为持久化状态层
把部分状态映射到 URL 参数或本地存储，既实现跨会话保留，又让状态可分享、可回退。
-
路由状态（如搜索关键词、分页页码）同步到 URL：
history.replaceState({}, '', `?q=${q}&page=${page}`)，配合popstate监听 - 用户偏好类状态（主题、折叠状态）存 localStorage，用
storage事件广播跨 tab 变更 - 注意序列化：用
JSON.stringify存，JSON.parse取；避免存函数、undefined、Date 对象等无法序列化的值 - 不是替代内存状态，而是与之协同——内存中保持运行态，持久层负责落地和初始化
不复杂但容易忽略：状态管理真正的难点从来不是“怎么存”，而是“谁有权改”和“改了之后谁要重算”。选方案前，先理清你的状态边界——哪些是 UI 衍生（应计算得出），哪些是真实来源（应唯一可信），再决定用对象、Proxy 还是 atom 来承载。
