JS监听对象属性改变

 设想这么一个需求：

user.name = '张三'

对user数据进行操作的时候，同步的修改页面上的用户名为张三。

这就是个数据绑定的概念。

 

针对这类需求

ES5提供了Object.defineProperty函数

使用方式如下所示:

1 Object.defineProperty(user, 'name', {
2     set:function(key,value){
3           //此处拦截了设置请求
4     }
5 
6 });

 

但是，如果为user增加一个新的属性，比如user里没有id属性，增加一个 user.id=1，Object.defineProperty函数是不知道存在'id'的，也就无法写出上面的代码，这可以用ES6提供的Proxy代理处理，代码如下：

 

var user = new Proxy({},{
     set:function(target,key,value,receiver){
       //处理代码
     }
})