defineProperty和proxy区别
不同点
监听方式
下面我们针对一个对象使用不同的方式进行监听,看写法上有什么不同
// 原始对象
const data = {
name: 'Jane',
age: 21
}
defineProperty
defineProperty
只能劫持对象的某一个属性,不能对整个对象进行劫持,如果需要监听某一个对象的所有属性,需要遍历对象的所有属性并对其进行劫持来进行监听
Object.keys(data).forEach(key => {
let oldValue = data[key]
Object.defineProperty(data, key, {
get() {
console.log('%c 调用get', 'color: green') // 这里为了控制台更明显看出调用,使用了不同颜色进行区分
return oldValue
},
set(value) {
console.log('%c 调用set', 'color: blue')
oldValue = value
}
})
})
console.log(data.name) // Jane
data.name = 'Jian'
console.log(data.name) // Jian
console.log(data)
控制台查看对象属性,也是触发了 setter
的
proxy
const proxyData = new Proxy(data, {
get(target, prop) {
console.log('%c 调用get', 'color: green')
return Reflect.get(target, prop)
},
set(target, prop, value) {
console.log('%c 调用set', 'color: blue')
return Reflect.set(target, prop, value) // Reflect通过代理对象更改目标对象的属性值
}
})
console.log('proxyData.name -> ', proxyData.name) // Jane
console.log('data.name -> ', data.name) // Jane
proxyData.name = 'Jian'
console.log('proxyData.name -> ', proxyData.name) // Jian
console.log('data.name -> ', data.name) // Jian
设置代理对象的属性后,原始对象和代理对象都发生了变化,但是获取原始对象的属性不会触发 getter
,只有访问代理对象的属性才能触发 getter
,但是触发了 getter
和 setter
都是去给原始对象获取属性值和设置属性值,因为这里的 target
就是这个原始对象。
区别一:defineProperty
是对属性劫持,proxy
是对对象代理
对象新增属性
根据他们的监听方式的不同我们就知道,当对象新增属性的时候,defineProperty
没有对新增的属性进行劫持,自然就不会监听到对象新增的属性变化,而proxy
是对对象进行代理,自然就能监听到对象属性的新增。
区别二:defineProperty
无法监听对象新增属性,proxy
可以
对象删除属性
proxy
有专门针对属性删除的方法 deleteProperty
,可以在对象属性被删除时触发
const proxyData = new Proxy(data, {
get(target, prop) {
console.log('%c 调用get', 'color: green')
return Reflect.get(target, prop)
},
set(target, prop, value) {
console.log('%c 调用set', 'color: blue')
return Reflect.set(target, prop, value)
},
deleteProperty(target, prop) {
console.log('%c 调用delete', 'color: red')
Reflect.deleteProperty(target, prop)
return true
}
})
delete proxyData.age
console.log(data)
区别三:defineProperty
无法监听对象删除属性,proxy
可以
数组的监听
// 原始数据
const data = ['a', 'b']
如果用defineProperty监听数组
Object.keys(data).forEach(key => {
let oldValue = data[key]
Object.defineProperty(data, key, {
get() {
console.log('%c 调用get', 'color: green', key)
return oldValue
},
set(value) {
console.log('%c 调用set', 'color: blue')
oldValue = value
}
})
})
data.push('c') // 不触发
data.length = 3 // 不触发
问题是:数组的 push
、pop
、shift
、unshift
、splice
、sort
,reverse
是无法触发 set
方法的
Vue 中能对数组的这些方法监听到是因为 Vue 源码对数组的这些方法进行了重载:
// Vue 中对数组方法的重载
Object.keys(data).forEach(key => {
let oldValue = data[key]
Object.defineProperty(data, key, {
get() {
console.log('%c 调用get', 'color: green', key)
return oldValue
},
set(value) {
console.log('%c 调用set', 'color: blue')
oldValue = value
}
})
})
const methods = ['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse']
methods.forEach(method => {
let original = Array.prototype[method]
Object.defineProperty(Array.prototype, method, {
value() {
console.log('%c 调用数组方法', 'color: blue', method)
original.apply(this, arguments)
}
})
})
data.push('c')
data.length = 3 // 不触发
proxy 监听方式
const proxyData = new Proxy(data, {
get(target, prop, receiver) {
console.log('%c 调用get', 'color: green', prop)
return Reflect.get(target, prop, receiver)
},
set(target, prop, value, receiver) {
console.log('%c 调用set', 'color: blue', prop)
return Reflect.set(target, prop, value, receiver)
},
})
proxyData.push('c') // 触发两次getter两次setter
proxyData.length = 3 // 触发 setter
区别四:defineProperty
监听数组的操作需要重载原型方法,proxy
不需要对数组的方法进行重载。
性能
区别五:proxy
是浏览器支持的原生 API 直接通过浏览器的引擎就可以执行,defineProperty
是循环遍历对象属性的方式来进行监听,自然会比 proxy
对整个对象进行监听的方式要耗性能。
相同点
都不支持嵌套
// 原始数据
const data = {
name: 'Jane',
age: 21,
obj: {
name: 'Jian'
}
}
// defineProperty
Object.keys(data).forEach(key => {
let oldValue = data[key]
Object.defineProperty(data, key, {
get() {
console.log('%c 调用get', 'color: green', key)
return oldValue
},
set(value) {
console.log('%c 调用set', 'color: blue')
oldValue = value
}
})
})
console.log(data.obj.name)
data.obj.name = 'Jian01'
console.log(data.obj.name)
// proxy
const proxyData = new Proxy(data, {
get(target, prop) {
console.log('%c 调用get', 'color: green', prop)
return Reflect.get(target, prop)
},
set(target, prop, value) {
console.log('%c 调用set', 'color: blue')
return Reflect.set(target, prop, value)
},
deleteProperty(target, prop) {
console.log('%c 调用delete', 'color: red')
Reflect.deleteProperty(target, prop)
return true
}
})
console.log(proxyData.obj.name)
proxyData.obj.name = 'Jian02'
console.log(proxyData.obj.name)
共同点:都不支持嵌套