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

本文主要是介绍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以下

这篇关于es6中的Proxy和vue中的数据代理的异同的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！