Object.defineProperty(obj,"name",{
set:function(val){
if(var==='lisi'){
console.log("誓死不叫这么土的名字")
}else{
objCopy.name = val
}
},
get:function(){
return objCopy.name.replace(/san/,'先生')
}
})
这个对每个data中的属性进行遍历绑定。
而,
get,set方法的target参数即obj对象,key参数是要操作的属性,value参数是赋值动作时的值。var objCopy = new Proxy(obj,{ get:function(target,key){ if(key=='name'){ return target[key].replace(/san/,'先生'); } }, set:function(target,key,value){ if(key == 'name'){ value=='lisi'?target[key]:target[key] = value; }else{ target[key] = value; } } })
此后,可通过objCopy.name的方式访问obj的name属性,也可以通过objCopy.name='lisi'的方式设置obj的name属性,而且不用给每个属性都设置set,get方法,不会触发循环调用,很是爽的。
这样我们通过对objCopy对象的操作就实现了对obj对象的操作,objCopy对象就是obj对象的代理对象。
vue3.0使用了Proxy替换了原先遍历对象使用Object.defineProperty方法给属性添加set,get访问器的笨拙做法。 也就是说不应遍历了,而是直接监控data对象了。