比较Vue2与Vue3的响应式

vue2的响应式
    ● 核心:
      ○ 对象: 通过defineProperty对对象的已有属性值的读取和修改进行劫持(监视/拦截)
      ○ 数组: 通过重写数组更新数组一系列更新元素的方法来实现元素修改的劫持

Object.defineProperty( data, 'count', {
	get(){},
	set(){}
})

//模拟实现一下
let person = {
	name: '张三',
	age: 15,
}
let p = {}
Object.defineProperty( p, 'name', {
	configurable: true, //配置这个属性表示可删除的，否则delete p.name 是删除不了的 false
	get(){
		//有人读取name属性时调用
		return person.name
	},
	set(value){
		//有人修改时调用
		person.name = value
	}
})

Vue3的响应式
    ● 核心:
      ○ 通过Proxy(代理): 拦截对data任意属性的任意(13种)操作, 包括属性值的读写, 属性的添加, 属性的删除等...
      ○ 通过 Reflect(反射): 动态对被代理对象的相应属性进行特定的操作
      ○ 文档:
        ■ https://developer.mozilla.org/zh- CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy
        ■

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect

let person = {
	name: '张三',
	age: 15,
}
//我们管p叫做代理数据，管person叫源数据
const p = new Proxy(person,{
	//target代表的是person这个源对象，propName代表读取或者写入的属性名
	get(target,propName){
		console.log('有人读取了p上面的propName属性')
		return Reflect.get(target, propName)
	},
	//不仅仅是修改调用，增加的时候也会调用
	set(target,propName,value){
		console.log(`有人修改了p身上的${propName}属性，我要去更新界面了`)
		Reflect.set(target, propName, value)
	},
	deleteProperty(target,propName){
		console.log(`有人删除了p身上的${propName}属性，我要去更新界面了`)
		return Reflect.deleteProperty(target,propName) 
	}
})