// 方法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框架的响应式系统来监听数据变化。这些方法都可以实现在对象属性发生变化时执行特定的操作。