vue2.x与vue3.0_proxy与Object.defineProperty()的区别

（1）2.0中递归遍历data中的数据，使用 Object.defineProperty()劫持 getter和setter，在getter中做数据依赖收集处理，在setter中 监听数据的变化，并通知订阅当前数据的地方。

1. 检测不到对象属性的添加和删除，当前新加的这个属性并没有加入vue检测数据更新的机制(因为是在初始化之后添加的)。
   注：vue.$set是能让vue知道你添加了属性,它会给你做处理，$set内部也是通过调用Object.defineProperty()去处理的。

2. 无法监控到数组下标的变化，导致直接通过数组的下标给数组设置值，不能实时响应。

3. 当data中数据比较多且层级很深的时候，会有性能问题，因为要遍历data中所有的数据并给其设置成响应式的。

（2）3.0中采用proxy对对象进行拦截(代理原型直接对原型进行更改)，无论新增访问删除都必须通过拦截

1. Reflect(ES6引入) 是一个内置的对象，reflect提供拦截javaScript的操作方法，将Object对象一些明显属于语言内部方法（比如Object.defineProperty()，get(),set()等）放到Reflect对象上修改某些Object方法的返回结果，让其变得更合理。让Object操作都变成函数行为

（3）总结

1. Proxy是用来操作对象的，拓展对象的能力。Object.defineProperty() 是对对象属性进行操作。
2. vue2.x使用 Object.defineProperty()实现数据的响应式，但是由于 Object.defineProperty()是
   对对象属性的操作，所以需要对对象进行深度遍历去对属性进行操作
3. vue3.0 用 Proxy 是对对象进行拦截操作，无论是对对象做什么样的操作都会走到 Proxy 的处理逻辑中
   如：

//Object.defineProperty()实现
	class Observer {
  	  constructor(data) {
	        // 遍历参数data的属性,给添加到this上
	        for(let key of Object.keys(data)) {
  	          if(typeof data[key] === 'object') {
	                data[key] = new Observer(data[key]);
	            }
	            Object.defineProperty(this, key, {
	                enumerable: true,
	                configurable: true,
	                get() {
	                    console.log('你查看了' + key);
	                    return data[key]; // 中括号法可以用变量作为属性名,而点方法不可以;
	                },
	                set(newVal) {
	                    console.log('你新增了' + key);
	                    console.log('新的' + key + '=' + newVal);
	                    if(newVal === data[key]) {
	                        return;
	                    }
	                    data[key] = newVal;
	                }
	            })
	        }
	    }
	}
	
	const obj = {
	    name: 'app',
	    age: '18',
	    a: {
	        b: 1,
	        c: 2,
	    },
	}
	const define= new Observer(obj);
	define.age = 20;
	console.log(define.age);
	define.newPropKey = '新属性';
	console.log(define.newPropKey);

//Proxy 实现
	const obj = {
	    name: 'app',
	    age: '18',
	    a: {
	        b: 1,
	        c: 2,
	    },
	}
	const proxy = new Proxy(obj, {
	    get(target, propKey, receiver) {
	        console.log('你查看了' + propKey);
	        return Reflect.get(target, propKey, receiver);
	    },
	    set(target, propKey, value, receiver) {
	        console.log('你新增了' + propKey);
	        console.log('新的' + propKey + '=' + value);
	        Reflect.set(target, propKey, value, receiver);
	    }
	});
	proxy.age = '20';
	console.log(proxy.age);
	proxy.newPropKey = '新属性';
	console.log(proxy.newPropKey);