vue proxy 的优势与使用场景实现


Posted in Javascript onJune 15, 2020

1.前言

随着 vue3.x 的消息越来越多, proxy 的讨论也。相对于 Object.definePropertyproxy 有什么区别,有什么优势,以及可以应用在什么地方。该文章就简单的介绍下

2.Object.defineProperty

proxy 之前,先回顾下 Object.defineProperty 。大家都知道, vue2.x 以及之前的版本是使用 Object.defineProperty 实现数据的双向绑定的,至于是怎样绑定的呢?下面简单实现一下

function observer(obj) {
  if (typeof obj ==='object') {
    for (let key in obj) {
      defineReactive(obj, key, obj[key])
    }
  }
}

function defineReactive(obj, key, value) {
  //针对value是对象,递归检测
  observer(value)
  //劫持对象的key
  Object.defineProperty(obj, key, {
    get() {
      console.log('获取:'+key)
      return value
    },
    set(val) {
      //针对所设置的val是对象
      observer(val)
      console.log(key+"-数据改变了")
      value = val
    }
  })
}

let obj={
  name:'守候',
  flag:{
    book:{
      name:'js',
      page:325
    },
    interest:['火锅','旅游'],
  }
}

observer(obj)

在浏览器的 console 执行一下,似乎能正常运行

vue proxy 的优势与使用场景实现

但是实际上, Object.defineProperty 问题有以下几个

问题1.删除或者增加对象属性无法监听到

比如增加一个属性 gender ,由于在执行 observer(obj) 的时候,没有这个属性,所以这个无法监听到。删除的属性也是无法监听到

增加属性的时候, vue 需要使用 $set 进行操作, $set 的内部也是使用 Object.defineProperty 进行操作

vue proxy 的优势与使用场景实现

问题2.数组的变化无法监听到

vue proxy 的优势与使用场景实现

由上图得知,虽然数组属性实际上是修改成功了,但是不能被监听到

问题3. 由于是使用递归遍历对象,使用 Object.defineProperty 劫持对象的属性,如果遍历的对象层级比较深,花的时间比较久,甚至有性能的问题

3.proxy

对于 proxy ,在 mdn 上的描述是: 对象用于定义基本操作的自定义行为(如属性查找、赋值、枚举、函数调用等)

简单来说就是,可以在对目标对象设置一层拦截。无论对目标对象进行什么操作,都要经过这层拦截

听上去似乎, proxyObject.defineProperty 要好用,并且简单很多,实际上就是如此。下面用 proxy 对上面的代码进行改写试下

function observerProxy(obj){
  let handler = {
   get (target, key, receiver) {
    console.log('获取:'+key)
    // 如果是对象,就递归添加 proxy 拦截
    if (typeof target[key] === 'object' && target[key] !== null) {
     return new Proxy(target[key], handler)
    }
    return Reflect.get(target, key, receiver)
   },
   set (target, key, value, receiver) {
    console.log(key+"-数据改变了")
    return Reflect.set(target, key, value, receiver)
   }
  }
  return new Proxy(obj, handler)
}


let obj={
  name:'守候',
  flag:{
    book:{
      name:'js',
      page:325
    },
    interest:['火锅','旅游'],
  }
}

let objTest=observerProxy(obj)

也是一样的效果

vue proxy 的优势与使用场景实现

而且,能做到 Object.defineProperty 做不到的事情,比如增加一个属性 gender ,能够监听到

vue proxy 的优势与使用场景实现

操作数组,也能监听到

vue proxy 的优势与使用场景实现

最后敲一下黑板,简单总结一下两者的区别

1. Object.defineProperty 拦截的是对象的属性,会改变原对象。 proxy 是拦截整个对象,通过 new 生成一个新对象,不会改变原对象。

2. proxy 的拦截方式,除了上面的 get 和 set ,还有 11 种。选择的方式很多 Proxy ,也可以监听一些 Object.defineProperty 监听不到的操作,比如监听数组,监听对象属性的新增,删除等。

4.proxy 使用场景

关于 proxy 的使用场景,受限于篇幅,这里就简单列举几个,更多的可以移步我的 github 笔记或者 mdn 。

看到这里,两者的区别,和 proxy 的优势已经知道个大概了。但是在开发上,有哪些场景可以使用到 proxy 呢,下面列举个可能会遇上的情况

4-1.负索引数组

在使用 splice(-1)slice(-1) 等 API 的时候,当输入负数的时候,会定位到数组的最后一项,但是在普通数组上,并不能使用负数。 [1,2,3][-1] 这个代码并不能输出 3 。要让上面的代码输出 3 , 也可以使用 proxy 实现。

let ecArrayProxy = {
 get (target, key, receiver) {
  let _index=key<0?target.length+Number(key):key
  return Reflect.get(target, _index, receiver)
 }
}
let arr=new Proxy([1,2,3],ecArrayProxy)

vue proxy 的优势与使用场景实现 

4-2.表单校验

在对表单的值进行改动的时候,可以在 set 里面进行拦截,判断值是否合法

let ecValidate = {
 set (target, key, value, receiver) {
  if (key === 'age') {
   //如果值小于0,或者不是正整数
   if (value<0||!Number.isInteger(value)) {
    throw new TypeError('请输入正确的年龄');
   }
  }
  return Reflect.set(target, key, value, receiver)
 }
}

let obj=new Proxy({age:18},ecValidate)
obj.age=16
obj.age='少年'

vue proxy 的优势与使用场景实现 

4-3.增加附加属性

比如有一个需求,保证用户输入正确身份证号码之后,把出生年月,籍贯,性别都添加进用户信息里面

众所周知,身份证号码第一和第二位代表所在省(自治区,直辖市,特别行政区),第三和第四位代表所在市(地级市、自治州、盟及国家直辖市所属市辖区和县的汇总码)。第七至第十四位是出生年月日。低17位代表性别,男单女双。

const PROVINCE_NUMBER={
  44:'广东省',
  46:'海南省'
}
const CITY_NUMBER={
  4401:'广州市',
  4601:'海口市'
}

let ecCardNumber = {
 set (target, key, value, receiver) {
  if(key === 'cardNumber'){
    Reflect.set(target, 'hometown', PROVINCE_NUMBER[value.substr(0,2)]+CITY_NUMBER[value.substr(0,4)], receiver)
    Reflect.set(target, 'date', value.substr(6,8), receiver)
    Reflect.set(target, 'gender', value.substr(-2,1)%2===1?'男':'女', receiver)
  }
  return Reflect.set(target, key, value, receiver)
 }
}
let obj=new Proxy({cardNumber:''},ecCardNumber)

vue proxy 的优势与使用场景实现 

4-4.数据格式化

比如有一个需求,需要传时间戳给到后端,但是前端拿到的是一个时间字符串,这个也可以用 proxy 进行拦截,当得到时间字符串之后,可以自动加上时间戳。

let ecDate = {
 set (target, key, value, receiver) {
  if(key === 'date'){
    Reflect.set(target, 'timeStamp', +new Date(value), receiver)
  }
  return Reflect.set(target, key, value, receiver)
 }
}
let obj=new Proxy({date:''},ecDate)

vue proxy 的优势与使用场景实现 

参考链接

Proxy

面试官: 实现双向绑定Proxy比defineproperty优劣如何?

简单通俗的理解Vue3.0中的Proxy

小结

proxyObject.defineproperty 的一些区别,以及 proxy 的优势,使用场景,暂时就介绍到这里了。这篇文章介绍的不算深入,理解圈起来不难。对于 proxy ,笔者也打算继续深入学习,如果往后有收获,也会第一时间分享。如果文章有什么错误,或者有什么建议,欢迎评论区留言。

到此这篇关于vue proxy 的优势与使用场景实现的文章就介绍到这了,更多相关vue proxy 使用场景内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
农历与西历对照
Sep 06 Javascript
使用JQuery和s3captche实现一个水果名字的验证
Aug 14 Javascript
jQuery 一个图片切换的插件
Oct 09 Javascript
jquery中加载图片自适应大小主要实现代码
Aug 23 Javascript
Jquery 模拟用户点击超链接或者按钮的方法
Oct 25 Javascript
jquery自定义函数的多种方法
Jan 09 Javascript
jQuery实现ajax的叠加和停止(终止ajax请求)
Aug 08 Javascript
关于JavaScript中事件绑定的方法总结
Oct 26 Javascript
微信小程序仿微信运动步数排行(交互)
Jul 13 Javascript
微信小程序实现侧边分类栏
Oct 21 Javascript
解决vue的过渡动画无法正常实现问题
Oct 31 Javascript
JavaScript enum枚举类型定义及使用方法
May 15 Javascript
原生JS利用transform实现banner的无限滚动示例代码
Jun 15 #Javascript
koa中间件核心(koa-compose)源码解读分析
Jun 15 #Javascript
为react组件库添加typescript类型提示的方法
Jun 15 #Javascript
JavaScript中的全局属性与方法深入解析
Jun 14 #Javascript
Vue使用Three.js加载glTF模型的方法详解
Jun 14 #Javascript
浅谈Vue 自动化部署打包上线
Jun 14 #Javascript
JS定时器如何实现提交成功提示功能
Jun 12 #Javascript
You might like
给初学者的30条PHP最佳实践(荒野无灯)
2011/08/02 PHP
php读取富文本的时p标签会出现红线是怎么回事
2014/05/13 PHP
深入理解PHP中的empty和isset函数
2016/05/26 PHP
php+mysql实现的无限分类方法类定义与使用示例
2020/05/27 PHP
jQuery 获取对象 定位子对象
2010/05/31 Javascript
鼠标事件延时切换插件
2011/03/12 Javascript
jquery 图片上传按比例预览插件集合
2011/05/28 Javascript
浏览器的JavaScript引擎的识别方法
2013/10/20 Javascript
最简单的JavaScript验证整数、小数、实数、有效位小数正则表达式
2015/04/17 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
2016/02/19 Javascript
基于js中的原型、继承的一些想法
2016/08/10 Javascript
微信小程序 Storage API实例详解
2016/10/02 Javascript
Vue-路由导航菜单栏的高亮设置方法
2018/03/17 Javascript
echarts饼图各个板块之间的空隙如何实现
2020/12/01 Javascript
[52:57]2014 DOTA2国际邀请赛中国区预选赛 LGD-CDEC VS HGT
2014/05/21 DOTA
python处理csv数据的方法
2015/03/11 Python
关于python pyqt5安装失败问题的解决方法
2017/08/08 Python
实例讲解Python中浮点型的基本内容
2019/02/11 Python
详解Python正则表达式re模块
2019/03/19 Python
python 为什么说eval要慎用
2019/03/26 Python
Python安装whl文件过程图解
2020/02/18 Python
利用Python如何制作贪吃蛇及AI版贪吃蛇详解
2020/08/24 Python
python switch 实现多分支选择功能
2020/12/21 Python
用HTML5.0制作网页的教程
2010/05/30 HTML / CSS
HTML5实现获取地理位置信息并定位功能
2015/04/25 HTML / CSS
阳光体育:Sunny Sports(购买露营和远足设备)
2018/08/07 全球购物
会计实习生自我鉴定
2013/12/12 职场文书
无工作经验者个人求职信范文
2013/12/22 职场文书
校园之声广播稿
2014/01/31 职场文书
大学生就业意向书范文
2014/04/01 职场文书
基层党员四风问题自我剖析材料
2014/09/29 职场文书
上课迟到检讨书300字
2014/10/15 职场文书
个人年终总结开头
2015/03/06 职场文书
2015年监理工作总结范文
2015/04/07 职场文书
幼儿园家长反馈意见
2015/06/03 职场文书
培根随笔读书笔记
2015/07/01 职场文书