vue3.0响应式原理

vue2中的响应式原理使用的是Object.defineProperty
vue3中的响应式原理 使用的是 Proxy代理模式

let person = {
	name: '王五',
	age '20'
}

// 代码模拟实现
/* 
	target： 代理的对象
	propName：被修改的属性
	value： 修改时传入的值
*/
const p = new Proxy(person, {
	// 有人读取P身上的某个属性时调用
	get(target, propName) {
		console.log(`有人读取了p身上的${propName}属性`)
		return target[propName]
	},
	// 有人修改p的某个属性，或者给P添加某个属性时调用
	set(targer, propName, value) {
		console.log(`有人修改了p身上的${propName}属性，我要去更新界面`)
		target[propName] = value
	},
	// 有人删除P的某个属性时调用
	deleteProperty(target, propName) {
		console.log(`有人删除了p身上的${propName}属性，我要去更新界面`)
		return delete target[propName]
	}
})