完全可行:用对象字面量(const 声明+字段可变)、Proxy(拦截 set 并 emit 路径级变更)和发布订阅(事件总线+细粒度通知)组合,实现零框架响应式状态管理,支持模块化工厂函数与 React 轻量 Hook。

完全可行。关键不是“造轮子”,而是用好 JavaScript 原生能力——对象字面量 + Proxy + 发布订阅,三者组合就能在零框架前提下实现真正可用的响应式状态管理。
用 const 声明结构,但让字段可变
对象字面量本身是静态结构,但状态需要动态更新。做法是:用 const 锁定整个对象引用不变,同时允许内部字段赋值——这既防止误替换,又保留灵活性。
- 不写
let store = { ... },避免整对象被意外重赋值 - 字段初始化明确(
false、null、[]),不留undefined,减少运行时歧义 - 避免在字面量里塞方法逻辑,把行为抽到外部函数,保持状态与逻辑分离
用 Proxy 拦截属性变更,触发通知
原生对象不会自动广播变化。加一层 Proxy 就能监听 set 操作,并主动发出更新信号。
FastAPI + Flask 混合部署最佳实践,解决路由定义、API 代理等常见问题,适用于同时运行 FastAPI API 与 Flask 前端的场景。
- 拦截器中记录修改路径(如
'user.name')和新值,便于精准通知 - 配合一个简单的事件总线(比如
{ on(), emit() }),让订阅者只关心自己需要的字段 - 不依赖脏检查或虚拟 DOM,每次赋值即刻响应,延迟趋近于零
导出模块化 store 工厂函数
直接暴露裸对象不利于复用和测试。封装成函数,就能控制初始化、副作用和生命周期。
- 每个工厂返回
{ state, actions, subscribe }三元组,语义清晰 -
actions内部调用state.xxx = newValue并自动emit,业务代码只管逻辑 - 多个模块可独立实例化,互不污染,也支持按需加载
搭配轻量级 useStore Hook(仅 React 场景)
如果项目用 React,可以写一个几十行的自定义 Hook,实现细粒度订阅,避免全量重渲染。
- Hook 接收 store 和路径字符串(如
'cart.items.length') - 内部用
useRef缓存上一次值,useEffect订阅对应路径变更 - 只有该路径值真正变化时才触发组件更新,性能接近手动
setState

















