初探Vue3.0中的一大亮点Proxy的使用_Vue3-获取Proxy对象代理中包裹的“真实数据“资源-CSDN下载

版权申诉

5星 · 超过95%的资源 95 浏览量 2021-01-19 18:03:47 上传评论收藏 99KB PDF 举报

资源推荐

资源详情

资源评论

初探初探Vue3.0 中的一大亮点中的一大亮点Proxy的使用的使用

前言前言

不久前，也就是11月14日-16日于多伦多举办的 VueConf TO 2018 大会上，尤雨溪发表了名为 Vue3.0 Updates 的主题演讲，

对 Vue3.0 的更新计划、方向进行了详细阐述，表示已经放弃使用了 Object.defineProperty，而选择了使用更快的原生 Proxy

!!

这将会消除了之前 Vue2.x 中基于 Object.defineProperty 的实现所存在的很多限制：无法监听属性的添加和删除、数组索引

和长度的变更，并可以支持 Map、Set、WeakMap 和 WeakSet！

做为一个 “前端工程师” ，有必要安利一波 Proxy !!

什么是什么是 Proxy？？

MDN 上是这么描述的——Proxy对象用于定义基本操作的自定义行为（如属性查找，赋值，枚举，函数调用等）。

官方的描述总是言简意赅，以至于不明觉厉…

其实就是在对目标对象的操作之前提供了拦截，可以对外界的操作进行过滤和改写，修改某些操作的默认行为，这样我们可以

不直接操作对象本身，而是通过操作对象的代理对象来间接来操作对象，达到预期的目的~

什么？还没表述清楚？下面我们看个例子，就一目了然了~

let obj = {

a : 1

}

let proxyObj = new Proxy(obj,{

get : function (target,prop) {

return prop in target ? target[prop] : 0

},

set : function (target,prop,value) {

target[prop] = 888;

}

})

console.log(proxyObj.a); // 1

console.log(proxyObj.b); // 0

proxyObj.a = 666;

console.log(proxyObj.a) // 888

上述例子中，我们事先定义了一个对象 obj , 通过 Proxy 构造器生成了一个 proxyObj 对象，并对其的 set(写入) 和 get (读取)

行为重新做了修改。

当我们访问对象内原本存在的属性时，会返回原有属性内对应的值，如果试图访问一个不存在的属性时，会返回0 ，即我们访

问 proxyObj.a 时，原本对象中有 a 属性，因此会返回 1 ，当我们试图访问对象中不存在的 b 属性时，不会再返回 undefined

，而是返回了 0 ，当我们试图去设置新的属性值的时候，总是会返回 888 ，因此，即便我们对 proxyObj.a 赋值为 666 ，但是

并不会生效，依旧会返回 888!

语法语法

ES6 原生提供的 Proxy 语法很简单，用法如下：

let proxy = new Proxy(target, handler);

参数 target 是用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）, 参数 handler 也

是一个对象，其属性是当执行一个操作时定义代理的行为的函数，也就是自定义的行为。

Proxy 的基本用法就如同上面这样，不同的是 handler 对象的不同，handler 可以是空对象 {} ，则表示对 proxy 操作就是对目

标对象 target 操作，即：

let obj = {}

let proxyObj = new Proxy(obj,{})

proxyObj.a = 1;

proxyObj.fn = function () {

console.log('it is a function')

}

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余5页未读，立即下载

内容反馈

版权申诉

yxldr

2023-06-10

对Vue3.0中Proxy的使用一无所知的人可以认真阅读一下这篇文章。
7323

2023-06-10

虽然这篇文章没有什么花哨的词藻，但是内容实用，值得一读。
LauraKuang

2023-06-10

这篇文章并没有过多的复杂术语，适合初学者阅读。
乔木Leo

2023-06-10

看完这篇文章，能够更深入地了解Vue3.0的特性。
白羊的羊

2023-06-10

一个学习Vue3.0的人不应该错过这个使用Proxy的教程。

前往

页

weixin_38599412

粉丝: 7

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip