当前位置：首页 > wzjs >正文

网站模板怎么用法郑州网站优化哪家好

wzjs 2025/8/25 6:33:04

网站模板怎么用法,郑州网站优化哪家好,免费推广网站教程,制作网页的三大技术是哪些Object.defineProperty() 到底是什么？ Object.defineProperty() 是 JavaScript 内置的 API，用来精确控制对象属性的行为，可以： 定义 getter / setter，让属性具备响应式能力使属性不可修改、不可枚举、不可删除拦截对…

`Object.defineProperty()` 到底是什么？

Object.defineProperty() 是 JavaScript 内置的 API，用来精确控制对象属性的行为，可以：

定义 getter / setter，让属性具备响应式能力
使属性 不可修改、不可枚举、不可删除
拦截对属性的访问和修改

Vue 2 的响应式系统，就是用 Object.defineProperty() 劫持 (Hijack) 数据，让数据变化时可以触发 Watcher 更新 UI。

1. `Object.defineProperty()` 的基本用法

let obj = {};
Object.defineProperty(obj, 'name', {value: 'Vue',writable: false,  // 不可修改enumerable: true, // 可被遍历configurable: false // 不可删除
});console.log(obj.name); // Vue
obj.name = 'React'; // ❌ 修改失败 (因为 writable: false)
delete obj.name; // ❌ 删除失败 (因为 configurable: false)

🔹 defineProperty() 参数

Object.defineProperty(对象, '属性名', {value: 初始值,  // 设置属性值writable: 是否可修改,enumerable: 是否可枚举,configurable: 是否可删除
});

2. Vue 2 响应式：用 `defineProperty()` 监听数据变化

在 Vue 2 中，每个 data 里的属性都会被 Object.defineProperty() 改造成 getter/setter。

let data = { message: 'Hello Vue' };Object.defineProperty(data, 'message', {get() {console.log('获取 message');return 'Hello Vue';},set(newVal) {console.log('message 变成:', newVal);// 这里可以触发 Vue 更新 UI}
});console.log(data.message); // 触发 getter，输出 "获取 message"
data.message = 'Hello React'; // 触发 setter，输出 "message 变成: Hello React"

🔹 Vue 2 响应式的核心：

访问属性时 (get)，可以 收集依赖（订阅 Watcher）
修改属性时 (set)，可以 触发更新（通知 Watcher 更新 UI）

3. `Object.defineProperty()` 如何让 Vue 2 变成响应式？

Vue 2 内部有个 defineReactive() 方法，它用 Object.defineProperty() 把 data 变成响应式。

function defineReactive(obj, key, val) {Object.defineProperty(obj, key, {get() {console.log(`读取 ${key}:`, val);return val;},set(newVal) {console.log(`修改 ${key}:`, newVal);val = newVal; // 这里会触发 Vue 重新渲染}});
}let obj = {};
defineReactive(obj, 'name', 'Vue');console.log(obj.name); // 读取 name: Vue
obj.name = 'React'; // 修改 name: React

🔹 Vue 2 响应式流程

Vue 初始化时，会遍历 data，用 defineReactive() 处理所有属性
访问属性时 (get)，Vue 记录依赖
修改属性时 (set)，Vue 触发更新

4. `defineProperty()` 的局限性

Vue 2 采用 Object.defineProperty() 但有缺点：

无法监听新增/删除的属性

let obj = {};
Object.defineProperty(obj, 'name', {value: 'Vue',configurable: false
});obj.age = 18; // ❌ 不能监听新属性
delete obj.name; // ❌ 不能删除

Vue 2 需要用 Vue.set(obj, key, value) 手动让新属性变成响应式。

无法监听数组的变化

let arr = [1, 2, 3];
Object.defineProperty(arr, 0, {get() { console.log('获取索引 0'); return 1; },set(newVal) { console.log('修改索引 0:', newVal); }
});arr[0]; // ✅ 触发 getter
arr[0] = 100; // ✅ 触发 setter
arr.push(4); // ❌ 无法监听 push

Vue 2 只能改写数组的方法（push、pop、splice），但仍然无法监听 arr[100] = 'new' 这样的新增操作。

5. Vue 3 为什么用 `Proxy` 替代 `defineProperty()`？

Vue 3 用 Proxy 解决 Vue 2 的问题：

let data = new Proxy({ name: 'Vue' }, {get(target, key) {console.log(`获取 ${key}:`, target[key]);return target[key];},set(target, key, value) {console.log(`修改 ${key}:`, value);target[key] = value;return true; // 必须返回 true，否则会报错}
});console.log(data.name); // 获取 name: Vue
data.name = 'React'; // 修改 name: React
data.age = 18; // ✅ Vue 3 可以监听新属性！

🔹 为什么 Vue 3 用 Proxy？

支持监听新增/删除属性
支持监听数组操作
性能更好，不需要遍历所有 data 里的属性

6. 结论

	`Object.defineProperty()` (Vue 2)	`Proxy` (Vue 3)
监听对象属性	✅ 可以	✅ 可以
监听新增属性	❌ 不能	✅ 可以
监听删除属性	❌ 不能	✅ 可以
监听数组变化	❌ 不能（只能 hack 数组方法）	✅ 可以
性能	低，需要遍历所有 `data`	高，拦截整个对象