Vue全流程--Vue3.0与Vue2.0响应式原理对比

Vue2中数据的响应式

需要使用Vue.set这么一个api，修改数据

需要使用Vue.delete这么一个api，删除数据

数据代理这个当面的理解可以看看我前面文章Vue全流程--数据代理的理解以及在Vue中的应用-CSDN博客

Vue3中数据的响应式

Vue3使用proxy这个api实现数据代理。相较于Vue2.0多了一个删除和增加时及时响应的能力

代理数据=reactive（源数据）：实现对数据的增删改查

reflect(源数据)：将代理数据的修改，反射到源数据上

const p = new Proxy(person,{
				//有人读取p的某个属性时调用
				get(target,propName){
					console.log(`有人读取了p身上的${propName}属性`)
					return Reflect.get(target,propName)
				},
				//有人修改p的某个属性、或给p追加某个属性时调用
				set(target,propName,value){
					console.log(`有人修改了p身上的${propName}属性，我要去更新界面了！`)
					Reflect.set(target,propName,value)
				},
				//有人删除p的某个属性时调用
				deleteProperty(target,propName){
					console.log(`有人删除了p身上的${propName}属性，我要去更新界面了！`)
					return Reflect.deleteProperty(target,propName)
				}
			})