vue2 vs vue3 响应式实现原理

// 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)
	},
})