vue2.0与vue3.0的响应式原理

Vue2.0的响应式

1. 实现原理：
   • 对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）
   • 数组类型：通过重写更新数组的一系列方法来实现拦截，（对数组的变更方法进行了包裹）
   • Object.defineProperty(data, ‘count’, { get(){}, set(){} })
2. 存在问题
   • 新增属性、删除属性，界面不会更新
   • 直接通过下标修改数组，界面不会自动更新

Vue3.0的响应式

1. 实现原理：
   • 通过Proxy（代理）：拦截对象任意属性的变化，包括：属性值得读写、属性得添加、属性的删除等
   • 通过Reflect（反射）：对被代理对象的属性进行操作
   • MDN文档中描述的Proxy与Reflect：
     -Proxy：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy
     -Reflect：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect

new Proxy(data, {
	// 拦截读取属性值
	get(target, prop){
		return Reflect.get(target, prop)
	},
	// 拦截设置属性值或添加新属性
	set(target, prop,value){
		return Reflect.set(target, prop,value)
	},
	// 拦截删除属性
	deleteProperty(target, prop){
		return Reflect.deleteProperty(target, prop)
	}
})