1:概述
1-1:Proxy 用于修改某些操作的默认行为,Proxy可以说在对对象进行各种访问或者操作的时候在外层进行一层拦截,在操作之前都需要经过这种拦截。proxy返回的是一个新对象,可以通过操作返回的新的对象达到目的。
列:拦截时设置了get,这样访问对应对象的属性全部都是拦截时设置的属性。
var t = { name: '小刘', age: 18, } var proxy = new Proxy(t, { get: function (target, propKey) { return 35; }, set:function(a,b,c){ console.log('@' + a +b+ c) //@ [object Object] time 34 } });
1-2:vue中的数据代理则是利用了Object.defineProperty(),不会生成新的对象,直接对原对象进行操作,作用跟Proxy差不多。里面的属性有可能会不一样,具体请查询官网
// 数据代理原理 let obj = { x: 100 }; let obj2 = { y: 200 }; Object.defineProperty('obj2', 'x', { get() { return obj.x }, set(value) { obj.x = value } }) 这里就可以通过obj2操作obj的x实现数据代理区别:Object.defineProperty() 不能对数组进行操作,而且如果对象的属性也是对象则需要进行深遍历,Proxy则不需要。
Proxy 有多达 13 种拦截方法,不限于 apply、ownKeys、deleteProperty、has 等等是 Object.defineProperty 不具备的
Proxy 返回的是一个新对象,我们可以只操作新的对象达到目的,而 Object.defineProperty 只能遍历对象属性直接修改
Proxy 可以直接监听对象而非属性;
但是Proxy的兼容性没Object.defineProperty()好,不支持IE8以下