响应式实现原理vue2 vs vue3
代码语言:javascript
复制// vue2
let p = {}
// 捕获对象某个属性的读写操作
Object.defineProperty(p, 'name', {
configurable: true,
get(){ // 捕获读取属性 },
set(value){ // 捕获修改属性 }
})
// vue3
let person = {
name: 'psr'
}
// 捕获了对象person所有属性的所有操作,并通过Reflect操作被代理源对象属性进行操作
const p = new Proxy(person, {
get(target, propName) {
// 捕获读取属性
return Reflect.get(target, propName)
},
set(target, propName, value) {
// 捕获修改或追加属性
Reflect.set(target, propName, value)
},
deleteProperty(target, propName){
// 捕获删除属性
return Reflect.deleteProperty(target, propName)
},
})