欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-03-06 18:58:22
...

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

  1. 检测不到对象属性的添加和删除,当前新加的这个属性并没有加入vue检测数据更新的机制(因为是在初始化之后添加的)。
    注:vue. s e t 是 能 让 v u e 知 道 你 添 加 了 属 性 , 它 会 给 你 做 处 理 , set是能让vue知道你添加了属性, 它会给你做处理, setvue,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);