Object.defineProperty 怎么用？属性描述符和元编程实践有多重要？
在Vue 2.x响应式系统的核心实现中，Object.defineProperty扮演着关键角色——它通过劫持对象属性，建立getter/setter监听机制，实现了数据到视图的自动更新。这背后体现的属性描述符控制能力和元编程实践，正是现代框架开发的基石。本文将深入剖析这一API的工作原理，揭示其在工程实践中的核心价值。 一、Object.defineProperty的核心机制 1.1 基础语法解析 ```javascript Object.defineProperty(obj, prop, descriptor) ``` 三个核心参数构成其基础架构： obj：目标对象 prop：要定义/修改的属性 descriptor：属性描述符（核心控制单元） 1.2 属性描述符详解 配置项 类型 默认值 作用 configurable boolean false 是否可删除/重定义 enumerable boolean false 是否可枚举 value any undefined 属性值 writable boolean false 是否可修改 get function undefined 取值器 set function undefined 存值器 ```typescript // 类型安全示例 interface ReactiveDescriptor { configurable: boolean; enumerable: boolean; get(): any; set(newVal: any): void; } ``` 二、四大核心应用场景解析 2.1 响应式系统实现 Vue 2.x的响应式原理实现： ```javascript function defineReactive(obj, key, val) { const dep = new Dep(); Object.defineProperty(obj, key, { get() { dep.depend(); // 收集依赖 return val; }, set(newVal) { val = newVal; dep.notify(); // 触发更新 } }); } ``` 2.2 属性访问控制 ```typescript class User { private _age: number = 0; get age(): number { return this._age; } set age(value: number) { if (value < 0) throw new Error(\'年龄不能为负\'); this._age = value; } } ``` 2.3 不可变数据结构 ```javascript const config = {}; Object.defineProperties(config, { apiUrl: { value: \'https://api.example.com\', writable: false }, timeout: { value: 5000, writable: false } }); ``` 2.4 元编程实践 ```typescript function observable(target: T): T { return new Proxy(target, { get(target, key) { track(target, key); // 跟踪访问 return Reflect.get(target, key); }, set(target, key, value) { trigger(target, key); // 触发更新 return Reflect.set(target, key, value); } }); } ``` 三、工程实践中的进阶技巧