深入探索：JavaScript中监听对象属性变化的几种方法

// 方法1: Object.defineProperty
let data = {};
let onDataChange;
 
Object.defineProperty(data, "value", {
    get() {
        return this._value;
    },
    set(newValue) {
        this._value = newValue;
        onDataChange && onDataChange();
    }
});
 
// 方法2: Proxy
let dataProxy = new Proxy(data, {
    get(target, property) {
        return target[property];
    },
    set(target, property, value) {
        target[property] = value;
        onDataChange && onDataChange();
        return true;
    }
});
 
// 方法3: Vue.js的响应式系统
// 需要引入Vue库
// 使用Vue构造器创建一个响应式的实例
let vm = new Vue({
    data: {
        value: null
    }
});
 
// 监听数据变化
vm.$watch('value', function(newValue, oldValue) {
    // 当vm.value变化时，这个函数会被调用
    console.log(`Value changed from ${oldValue} to ${newValue}`);
});
 
// 设置数据
vm.value = 10;

以上代码分别展示了三种在JavaScript中监听对象属性变化的方法：使用Object.defineProperty直接在对象上定义属性，使用Proxy处理器来监听对象的所有操作，以及使用Vue.js框架的响应式系统来监听数据变化。这些方法都可以实现在对象属性发生变化时执行特定的操作。