watch js实现
watch.js 实现方法
watch.js 是一个轻量级的 JavaScript 库，用于监视对象属性的变化。以下是几种实现方法：
使用 Object.defineProperty
通过 Object.defineProperty 可以定义属性的 getter 和 setter，从而在属性被访问或修改时触发回调。
function watch(obj, prop, callback) {
let value = obj[prop];
Object.defineProperty(obj, prop, {
get() {
return value;
},
set(newValue) {
if (newValue !== value) {
const oldValue = value;
value = newValue;
callback(newValue, oldValue);
}
}
});
}使用 Proxy
Proxy 可以拦截对象的操作，提供更灵活的监视能力。
function watch(obj, callback) {
return new Proxy(obj, {
set(target, prop, value) {
const oldValue = target[prop];
if (value !== oldValue) {
target[prop] = value;
callback(prop, value, oldValue);
}
return true;
}
});
}使用第三方库
如果不想手动实现，可以使用现成的库如 watch.js 或 mobx。
// 使用 watch.js 库
const obj = { a: 1 };
watch(obj, (prop, action, newValue, oldValue) => {
console.log(`Property ${prop} changed from ${oldValue} to ${newValue}`);
});
obj.a = 2; // 触发回调注意事项
Object.defineProperty只能监视已有属性，无法检测新增属性。Proxy可以监视所有属性变化，包括新增属性，但兼容性较差。- 第三方库通常提供更全面的功能，如深度监视、批量更新等。
