vue3.0中的双向数据绑定方法及优缺点


Posted in Javascript onAugust 01, 2019

熟悉vue的人都知道在vue2.x之前都是使用object.defineProperty来实现双向数据绑定的

而在vue3.0中这个方法被取代了

1. 为什么要替换Object.defineProperty

替换不是因为不好,是因为有更好的方法使用效率更高

Object.defineProperty的缺点:

1. 在Vue中,Object.defineProperty无法监控到数组下标的变化,

导致直接通过数组的下标给数组设置值,不能实时响应。

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

2. Object.defineProperty只能劫持对象的属性,因此我们需要对每个对象的每个属性进行遍历。

Vue里,是通过递归以及遍历data对象来实现对数据的监控的,

如果属性值也是对象那么需要深度遍历,显然如果能劫持一个完整的对象,不管是对操作性还是性能都会有一个很大的提升。

而要取代它的Proxy有以下两个优点:

1. 可以劫持整个对象,并返回一个新对象
2. 有13种劫持操作

2. 什么是Proxy

Proxy是 ES6 中新增的一个特性,翻译过来意思是"代理",用在这里表示由它来“代理”某些操作。 Proxy 让我们能够以简洁易懂的方式控制外部对对象的访问。其功能非常类似于设计模式中的代理模式。

Proxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。

使用 Proxy 的核心优点是可以交由它来处理一些非核心逻辑(如:读取或设置对象的某些属性前记录日志;设置对象的某些属性值前,需要验证;某些属性的访问控制等)。 从而可以让对象只需关注于核心逻辑,达到关注点分离,降低对象复杂度等目的。

基本用法:

let p = new Proxy(target, handler);

参数:

target: 是用Proxy包装的被代理对象(可以是任何类型的对象,包括原生数组,函数,甚至另一个代理)。
handler: 是一个对象,其声明了代理target 的一些操作,其属性是当执行一个操作时定义代理的行为的函数。

p是Proxy对象,当其他操作对p进行更改的时候,会执行handler对象的方法。Proxy有13种数据劫持的操作,常用的handler处理方法:

get: 读取值,
set: 获取值,
has: 判断对象是否拥有该属性,
construct: 构造函数

举个例子:

let obj = {};
 let handler = {
  get(target, property) {
  console.log(`${property} 被读取`);
  return property in target ? target[property] : 3;
  },
  set(target, property, value) {
  console.log(`${property} 被设置为 ${value}`);
  target[property] = value;
  }
 }
 let p = new Proxy(obj, handler);
 p.name = 'tom' //name 被设置为 tom
 p.age; //age 被读取 3

更多的Proxy属性方法参考MDN Proxy

3. Proxy实现数据劫持

observe(data) {
 const that = this;
 let handler = {
  get(target, property) {
   return target[property];
  },
  set(target, key, value) {
   let res = Reflect.set(target, key, value);
   that.subscribe[key].map(item => {
    item.update();
   });
   return res;
  }
 }
 this.$data = new Proxy(data, handler);
}

这段代码里把代理器返回的对象代理到this.$data,即this.$data是代理后的对象,外部每次对this.$data进行操作时,实际上执行的是这段代码里handler对象上的方法。

注:这儿用到了reflect属性,这也是ES6里面的,不知道的去这儿看看吧。reflect属性

总结

以上所述是小编给大家介绍的vue3.0中的双向数据绑定方法及优缺点,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
指定js可访问其它域名的cookie的方法
Sep 18 Javascript
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
Jan 04 Javascript
js跨浏览器实现将字符串转化为xml对象的方法
Sep 25 Javascript
JavaScript实现的圆形浮动标签云效果实例
Aug 06 Javascript
谈谈javascript中使用连等赋值操作带来的问题
Nov 26 Javascript
jQuery实现布局高宽自适应的简单实例
May 28 Javascript
详解微信小程序 登录获取unionid
Jun 27 Javascript
Node.JS使用Sequelize操作MySQL的示例代码
Oct 09 Javascript
vue实现多个元素或多个组件之间动画效果
Sep 25 Javascript
vue element中axios下载文件(后端Python)
May 10 Javascript
element表格翻页第2页从1开始编号(后端从0开始分页)
Dec 10 Javascript
微信小程序开发搜索功能实现(前端+后端+数据库)
Mar 04 Javascript
微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法
Aug 01 #Javascript
微信小程序使用Vant Weapp组件库的方法步骤
Aug 01 #Javascript
微信小程序中button去除默认的边框实例代码
Aug 01 #Javascript
vue-router两种模式区别及使用注意事项详解
Aug 01 #Javascript
jQuery中DOM常见操作实例小结
Aug 01 #jQuery
JS浮点数运算结果不精确的Bug解决
Aug 01 #Javascript
微信小程序动画组件使用解析,类似vue,且更强大
Aug 01 #Javascript
You might like
PHP 事务处理数据实现代码
2010/05/13 PHP
php 阴历-农历-转换类代码
2012/01/16 PHP
php加水印的代码(支持半透明透明打水印,支持png透明背景)
2013/01/17 PHP
splice slice区别
2006/10/09 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
2011/12/31 Javascript
jQuery下通过replace字符串替换实现大小图片切换
2012/05/22 Javascript
jquery获取html元素的绝对位置和相对位置的方法
2014/06/20 Javascript
JavaScript中的object转换成number或string规则介绍
2014/12/31 Javascript
利用JavaScript脚本实现滚屏效果的方法
2015/07/07 Javascript
简述Matlab中size()函数的用法
2016/03/20 Javascript
类似于QQ的右滑删除效果的实现方法
2016/10/16 Javascript
利用JavaScript在网页实现八数码启发式A*算法动画效果
2017/04/16 Javascript
JS仿QQ好友列表展开、收缩功能(第二篇)
2017/07/07 Javascript
JS判断微信扫码的方法
2017/08/07 Javascript
移动端H5页面返回并刷新页面(BFcache)的方法
2018/11/06 Javascript
JavaScript设计模式之代理模式实例分析
2019/01/16 Javascript
Vue基于iview实现登录密码的显示与隐藏功能
2020/03/06 Javascript
[33:23]VG vs Pain 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
动态创建类实例代码
2009/10/07 Python
python实现图片批量剪切示例
2014/03/25 Python
Python中的ceil()方法使用教程
2015/05/14 Python
python 随机数使用方法,推导以及字符串,双色球小程序实例
2017/09/12 Python
python web.py开发httpserver解决跨域问题实例解析
2018/02/12 Python
python实现抖音视频批量下载
2018/06/20 Python
Python实现模拟浏览器请求及会话保持操作示例
2018/07/30 Python
利用Django-environ如何区分不同环境
2018/08/26 Python
Django csrf 验证问题的实现
2018/10/09 Python
Python利用pip安装tar.gz格式的离线资源包
2020/09/14 Python
python连接mongodb数据库操作数据示例
2020/11/30 Python
H5仿微信界面教程(一)
2017/07/05 HTML / CSS
HTML5 LocalStorage 本地存储详细概括(多图)
2017/08/18 HTML / CSS
Woods官网:加拿大最古老、最受尊敬的户外品牌之一
2020/09/12 全球购物
员工趣味活动方案
2014/08/27 职场文书
员工试用期自我评价
2014/09/18 职场文书
2014年党员整改措施范文
2014/09/21 职场文书
2019最新激励员工口号大全!
2019/06/28 职场文书