#一、 vue2的defineProperty newobj是obj的深拷贝,如果get返回的是obj.name会无限触发get造成死循环,控制台报错。
let obj ={
name:""
}
let newObj =JSON.parse(JSON.stragify(obj))
Object.defineProperty (obj,"name",{
get:function(){
return newobj.name
},
set:function(val){
newobj.name=val
observe()
}
)
function observe () {
//set更新新值后的操作
}
setTimeout(() => {
object.name = "vue2"
}, 1000)
二、vue3的proxy
target是你的目标对象,prop是它的属性,set中比get中多了一个value,是要改变的值
let obj ={
name:""
}
let newobj = new Proxy (obj,{
get(target,prop){
return target[prop]
},
set(target,prop,value){
target[prop] = value
observer()
}
})
function observe () {
//set更新新值后的操作
}
setTimeout(() => {
object.name = "vue2"
}, 1000)
- 优点:
- 直接监听对象而非属性
- 直接监听数组的变化
- 拦截方式较多(有13种方式)
- Proxy返回一个新对象,可以只操作新对象达到目的,而Object.defineProperty只能遍历对象属性直接修改(需要用深拷贝进行修改)
- Proxy作为新标准将受到浏览器厂商重点持续的性能优化