37 lines
812 B
JavaScript
37 lines
812 B
JavaScript
class Component {
|
|
_data = {
|
|
name: "",
|
|
};
|
|
pending = false; // 开关
|
|
constructor() {
|
|
this.data = new Proxy(this._data, {
|
|
set: (target, key, value) => {
|
|
// 1. 设置值
|
|
this._data[key] = value;
|
|
// this.render();
|
|
// 2. 判断是否开启
|
|
if (!this.pending) {
|
|
this.pending = true;
|
|
Promise.resolve().then(() => {
|
|
this.render();
|
|
this.pending = false;
|
|
});
|
|
}
|
|
},
|
|
});
|
|
}
|
|
render() {
|
|
console.log(`render - name: ${this.data.name}`);
|
|
}
|
|
}
|
|
|
|
const com = new Component();
|
|
// 要求以下代码需要触发 render 方法，并且同步变更需要合并
|
|
com.data.name = "张三";
|
|
com.data.name = "李四";
|
|
com.data.name = "王五";
|
|
|
|
setTimeout(() => {
|
|
com.data.name = "渡一";
|
|
}, 0);
|