Javascript

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中的数据代理的异同的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!