本文摘自PHP中文网,作者Guanhui,侵删。
开汽车的人往往不了解汽车的构造,但是深入了解汽车的构造,可能会有如虎添翼的效果
前言
随着 vue3.x
的消息越来越多,proxy
的讨论也。相对于 Object.defineProperty
,proxy
有什么区别,有什么优势,以及可以应用在什么地方。该文章就简单的介绍下
Object.defineProperty
讲 proxy
之前,先回顾下 Object.defineProperty
。大家都知道,vue2.x
以及之前的版本是使用 Object.defineProperty
实现数据的双向绑定的,至于是怎样绑定的呢?下面简单实现一下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
|
在浏览器的 console
执行一下,似乎能正常运行
但是实际上,Object.defineProperty
问题有以下几个
问题1.删除或者增加对象属性无法监听到
比如增加一个属性 gender
,由于在执行 observer(obj)
的时候,没有这个属性,所以这个无法监听到。删除的属性也是无法监听到
增加属性的时候,
vue
需要使用$set
进行操作,$set
的内部也是使用Object.defineProperty
进行操作
问题2.数组的变化无法监听到
由上图得知,虽然数组属性实际上是修改成功了,但是不能被监听到
问题3.
由于是使用递归遍历对象,使用 Object.defineProperty
劫持对象的属性,如果遍历的对象层级比较深,花的时间比较久,甚至有性能的问题
proxy
对于 proxy
,在 mdn 上的描述是: 对象用于定义基本操作的自定义行为(如属性查找、赋值、枚举、函数调用等)
简单来说就是,可以在对目标对象设置一层拦截。无论对目标对象进行什么操作,都要经过这层拦截
听上去似乎,proxy
比 Object.defineProperty
要好用,并且简单很多,实际上就是如此。下面用 proxy 对上面的代码进行改写试下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
|
也是一样的效果
而且,能做到 Object.defineProperty
做不到的事情,比如增加一个属性 gender
,能够监听到
操作数组,也能监听到
最后敲一下黑板,简单总结一下两者的区别
1.Object.defineProperty
拦截的是对象的属性,会改变原对象。proxy
是拦截整个对象,通过 new 生成一个新对象,不会改变原对象。
2.proxy
的拦截方式,除了上面的 get 和 set ,还有 11 种。选择的方式很多 Proxy,也可以监听一些 Object.defineProperty
监听不到的操作,比如监听数组,监听对象属性的新增,删除等。
proxy 使用场景
关于 proxy
的使用场景,受限于篇幅,这里就简单列举几个,更多的可以移步我的 github 笔记或者 mdn。
看到这里,两者的区别,和 proxy
的优势已经知道个大概了。但是在开发上,有哪些场景可以使用到 proxy
呢,下面列举个可能会遇上的情况
负索引数组
在使用 splice(-1)
,slice(-1)
等 API 的时候,当输入负数的时候,会定位到数组的最后一项,但是在普通数组上,并不能使用负数。 [1,2,3][-1]
这个代码并不能输出 3 。要让上面的代码输出 3 , 也可以使用 proxy
实现。
1 |
|
表单校验
在对表单的值进行改动的时候,可以在 set
里面进行拦截,判断值是否合法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
增加附加属性
比如有一个需求,保证用户输入正确身份证号码之后,把出生年月,籍贯,性别都添加进用户信息里面
众所周知,身份证号码第一和第二位代表所在省(自治区,直辖市,特别行政区),第三和第四位代表所在市(地级市、自治州、盟及国家直辖市所属市辖区和县的汇总码)。第七至第十四位是出生年月日。低17位代表性别,男单女双。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
|
数据格式化
比如有一个需求,需要传时间戳给到后端,但是前端拿到的是一个时间字符串,这个也可以用 proxy
进行拦截,当得到时间字符串之后,可以自动加上时间戳。
1 2 3 4 5 6 7 |
|
推荐教程:《JS教程》
以上就是JS Proxy 的优势以及使用场景的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
更多相关阅读请进入《js》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者