Immutable对象的核心目标是通过属性描述符实现“逻辑不可变”:用writable:false控制基础字段,get返回副本保障嵌套数据只读,set拦截修改并触发dispatch,最终封装为类Immutable API确保单向数据流语义。

在前端单向数据流(如 Redux、Vuex 或自定义状态管理)中,Immutable 对象的核心目标不是靠 Object.freeze 硬冻结,而是通过属性描述符(Object.defineProperty)控制读写行为,实现“逻辑不可变”——即对外暴露只读视图,内部仍可安全更新,兼顾性能与语义清晰性。
用 writable: false 封装基础字段
对普通数据字段(如字符串、数字、布尔值),直接设置 writable: false 可阻止赋值,但需注意:它不递归冻结嵌套对象。适合扁平状态结构。
- 定义时显式声明
value并设writable: false,避免意外覆盖 - 配合
configurable: false防止属性被删除或重定义(生产环境推荐) - 示例:
Object.defineProperty(obj, 'count', { value: 0, writable: false, configurable: false })
用 get 描述符代理深层数据
对嵌套对象或数组,不冻结原始引用,而是用 get 返回新副本(如 structuredClone 或浅拷贝),确保外部无法修改内部结构。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
-
get中返回不可变视图:简单类型直接返回;对象/数组返回只读代理或克隆结果 - 避免在
get中执行耗时操作(如深克隆大对象),可结合 memoization 缓存 - 示例:
get() { return structuredClone(this._data); }(现代环境)或return [...this._list];(数组)
用 set 描述符拦截修改并触发更新
单向数据流要求状态变更必须显式、可追踪。将 set 作为唯一入口,强制走 action → reducer 流程。
立即学习“前端免费学习笔记(深入)”;
-
set内不直接修改原值,而是调用外部更新函数(如dispatch({ type: 'UPDATE_COUNT', payload: val })) - 配合
enumerable: false隐藏 setter,防止被遍历误用 - 可加类型校验或日志,便于调试状态变更路径
组合 descriptor 实现类 Immutable API
封装成工具函数,统一处理常见模式:例如 createImmutable({ count: 0, items: [] }) 自动为每个键生成 getter/setter,并支持 withChanges 式批量更新。
- 内部用
Proxy+defineProperty混合方案:Proxy 拦截动态访问,defineProperty 控制固定属性行为 - 对数组类属性,重写
push/map等方法为返回新数组的纯函数 - 关键点:所有“变更”都返回新实例(或触发 dispatch),原对象保持稳定引用

















