js 实现 数据双向绑定
时间: 2024-01-14 15:03:33 浏览: 30
在 JavaScript 中实现数据双向绑定,通常可以使用以下两种方式:
1. 使用 Object.defineProperty() 方法
Object.defineProperty() 方法可以用来定义对象的属性,包括数据属性和访问器属性。通过定义一个访问器属性,可以在属性值发生改变时触发回调函数,从而实现数据双向绑定。
示例代码:
```javascript
var data = { name: 'Alice' };
Object.defineProperty(data, 'name', {
get: function() {
console.log('get name:', this._name);
return this._name;
},
set: function(value) {
console.log('set name:', value);
this._name = value;
}
});
data.name; // 输出 'get name: Alice'
data.name = 'Bob'; // 输出 'set name: Bob'
```
2. 使用 Proxy 对象
Proxy 对象可以拦截对象的操作,包括属性访问、赋值等操作。通过拦截属性访问和赋值的操作,可以在属性值发生改变时触发回调函数,从而实现数据双向绑定。
示例代码:
```javascript
var data = { name: 'Alice' };
var handler = {
get: function(target, key) {
console.log('get', key);
return target[key];
},
set: function(target, key, value) {
console.log('set', key, value);
target[key] = value;
}
};
var proxy = new Proxy(data, handler);
proxy.name; // 输出 'get name'
proxy.name = 'Bob'; // 输出 'set name Bob'
```