属性描述符是JavaScript响应式与数据控制的核心底层机制:Vue2用Object.defineProperty配合get/set实现依赖收集与更新,Vue3中Proxy虽不直接使用描述符但常与其协同;React通过writable/configurable=false冻结props,框架普遍利用enumerable=false隐藏内部属性,保障响应式链稳定与调试体验。

属性描述符(Property Descriptor)在 JavaScript 框架源码中不是装饰用的语法糖,而是实现响应式、代理拦截、不可变约束等核心机制的关键底层工具。Vue 2 的 Object.defineProperty、Vue 3 和 MobX 的 Proxy 配合描述符逻辑、React 的 props 冻结策略,都深度依赖对 configurable、enumerable、writable 及 get/set 的精细控制。
响应式数据劫持(Vue 2 核心)
Vue 2 使用 Object.defineProperty 为 data 对象每个属性设置访问器描述符,把读写操作转为依赖收集与派发更新。
-
get 中触发依赖收集(
Dep.target && dep.depend()),让当前 watcher 记录该属性 -
set 中执行变更通知(
dep.notify()),触发视图更新或 computed 重新求值 -
configurable: false确保后续无法删除或重定义该属性,保障响应式链稳定 -
enumerable: false避免遍历到内部 setter/getter,不影响for...in或JSON.stringify
冻结与只读保障(React / Immutable 工具链)
框架常通过 Object.defineProperty 或 Object.freeze(本质批量设置 writable: false + configurable: false)锁定 props 或 state 快照。
macOS 微信消息自动化工具。通过 GUI 自动化实现:发送消息给指定联系人、读取聊天内容、监控新消息。适用于需要自动化微信操作的场景,如定时发送、批量回复、消息备份等。依赖 peekaboo 进行屏幕截图和 UI 交互。仅支持 macOS。开源地址:https://github.com/chairmanmia...
- React 在开发模式下对
this.props执行浅冻结:Object.defineProperty(obj, key, { writable: false, configurable: false }) - Redux Toolkit 的
createReducer默认启用immer,其内部用Object.isFrozen判断并配合描述符控制 proxy 层行为 -
enumerable: false用于隐藏内部标记属性(如$$typeof或__v_isRef),避免被 JSON 序列化或调试工具误读
Proxy 与描述符协同(Vue 3 / SolidJS)
虽然 Proxy 本身不直接使用描述符,但其 get/set trap 常模拟或封装描述符语义,尤其在 fallback 到非 Proxy 环境或处理原始对象时。
立即学习“Java免费学习笔记(深入)”;
- Vue 3 的
reactive对原始对象调用Object.getOwnPropertyDescriptors获取现有描述符,再结合Reflect.get/Reflect.set保证行为一致性 -
shallowRef或markRaw实际是给对象添加不可配置的私有属性(如__v_skip: true),并设configurable: false防止被意外覆盖 - 某些库(如
proxy-compare)在 diff 前检查Object.getOwnPropertyDescriptor,跳过不可枚举或只读字段以提升性能
运行时类型与调试辅助(Volar / Vue Devtools)
描述符也用于注入元信息,辅助 IDE 类型推导或开发者工具展示。
- Vue Devtools 读取
__ob__(Vue 2)或__v_skip(Vue 3)等不可枚举属性判断响应式状态 - Volar 插件解析
defineProps生成的类型声明时,会检测用户是否手动设置了enumerable: false的属性,决定是否在自动补全中隐藏 - 某些状态管理库(如 Zustand)在开发模式下用
Object.defineProperty给 store 添加toString描述符,使console.log(store)显示可读摘要而非裸对象

















