数据劫持是通过Object.defineProperty拦截对象属性的读取和修改操作，实现对数据变化的监听，在Vue 2中用于响应式系统；其核心是利用get和set捕获属性访问与赋值，结合递归遍历实现深度监听，但存在无法监控数组索引变化、动态增删属性等局限，需配合$set等方法弥补，最终被Vue 3的Proxy方案取代。
在JavaScript中，实现数据的响应式监听是很多框架（如Vue.js 2.x）的核心机制之一。其中，Object.defineProperty 是实现数据劫持的关键手段。通过它，我们可以拦截对象属性的读取和修改操作，从而在数据变化时自动触发视图更新或其他逻辑处理。
什么是数据劫起？
数据劫持指的是在不改变原始数据使用方式的前提下，通过技术手段“监听”对象属性的获取和设置行为。一旦某个属性被访问或修改，我们就可以执行额外的操作，比如更新UI、打印日志、校验数据等。
在 Vue 2 中，就是利用 Object.defineProperty 对 data 中的每个属性进行劫持，实现了响应式系统。
Object.defineProperty 基本用法
这个方法允许精确控制对象属性的行为。它的基本语法是：
立即学习“Java免费学习笔记（深入）”；
Object.defineProperty(obj, prop, descriptor)
- obj：要定义属性的对象
- prop：要定义或修改的属性名
- descriptor：属性描述符，包括 get、set、value、writable、enumerable、configurable 等
在做数据劫持时，最常用的是 get 和 set 拦截器。
示例：简单监听属性读写
let data = {
name: 'Alice'
};
let tempValue = data.name;
Object.defineProperty(data, 'name', {
get() {
console.log('属性被读取了');
return tempValue;
},
set(newValue) {
console.log('属性被修改为：' + newValue);
tempValue = newValue;
// 这里可以触发视图更新
}
});
data.name; // 输出：属性被读取了
data.name = 'Bob'; // 输出：属性被修改为：Bob
深度监听对象属性
上面的例子只监听了一个属性。实际应用中，我们需要递归遍历对象的所有属性，包括嵌套对象，才能实现完整的响应式。
以下是一个简化版的深度劫持实现：
function observe(obj) {
if (typeof obj !== 'object' || obj === null) {
return;
}
Object.keys(obj).forEach(key => {
defineReactive(obj, key, obj[key]);
});
}
function defineReactive(obj, key, value) {
observe(value); // 如果值是对象，继续劫持
Object.defineProperty(obj, key, {
get() {
console.log(`读取 ${key}：${value}`);
return value;
},
set(newVal) {
if (newVal === value) return;
console.log(`${key} 从 ${value} 变更为 ${newVal}`);
value = newVal;
observe(newVal); // 新值如果是对象，也要劫持
}
});
}
// 使用示例
const data = {
user: {
name: 'Tom',
age: 25
}
};
observe(data);
data.user.name; // 读取 name：Tom
data.user.name = 'Jerry'; // name 从 Tom 变更为 Jerry
局限性与注意事项
虽然 Object.defineProperty 功能强大，但也存在一些明显的限制：
- 无法直接监听数组下标的变化（如 arr[0] = newVal），需重写数组方法（如 push、pop）来补充
- 新增属性或删除属性不会触发 set/get，所以 Vue 2 提供了 $set 和 $delete 方法
- 只能劫持对象已有属性，对动态添加的属性无感知
- 需要递归遍历对象，性能开销较大，尤其是深层对象
正因为这些限制，Vue 3 已升级为基于 Proxy 的响应式系统，解决了大部分问题。
基本上就这些。掌握 Object.defineProperty 的原理，有助于理解现代前端框架的响应式机制底层逻辑，即使现在更多使用 Proxy，它依然是 JavaScript 进阶的重要知识点。
