es6中的Proxy和vue中的数据代理的异同

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

            }

        });

        console.log(proxy.time) // 35

        console.log(proxy.name) //35

        console.log(proxy.age) // 35

 

handler上面的各种方法

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以下