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 相关文章推荐
Javascript 学习笔记 错误处理
Jul 30 Javascript
JS 控件事件小结
Oct 31 Javascript
给页面渲染时间加速 干掉Dom Level 0 Event
Dec 19 Javascript
javascript不可用的问题探究
Oct 01 Javascript
js加密解密字符串可自定义密码因子
May 13 Javascript
简介alert()与console.log()的不同
Aug 26 Javascript
基于Vue实现支持按周切换的日历
Sep 24 Javascript
vue2.0实现移动端的输入框实时检索更新列表功能
May 08 Javascript
vue-router传参用法详解
Jan 19 Javascript
Vue之beforeEach非登录不能访问的实现(代码亲测)
Jul 18 Javascript
js实现选项卡效果
Mar 07 Javascript
vue实现放大镜效果
Sep 17 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数组实例总结与说明
2011/08/23 PHP
解析如何修改phpmyadmin中的默认登陆超时时间
2013/06/25 PHP
PHP几个实用自定义函数小结
2016/01/25 PHP
PHP单例模式数据库连接类与页面静态化实现方法
2019/03/20 PHP
js 蒙版进度条(结合图片)
2010/03/10 Javascript
Java Mybatis框架入门基础教程
2015/09/21 Javascript
原生javascript实现解析XML文档与字符串
2016/03/01 Javascript
使用Bootstrap美化按钮实例代码(demo)
2017/02/03 Javascript
详解webpack进阶之插件篇
2017/07/06 Javascript
vue使用Element组件时v-for循环里的表单项验证方法
2018/06/28 Javascript
vue中的router-view组件的使用教程
2018/10/23 Javascript
JS实现滚动条触底加载更多
2019/09/19 Javascript
js实现秒表计时器
2019/12/16 Javascript
详解vue-flickity的fullScreen功能实现
2020/04/07 Javascript
[04:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster 选手采访
2021/03/11 DOTA
[59:00]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD BO3 第一场 3月7日
2021/03/11 DOTA
python定时器使用示例分享
2014/02/16 Python
Nginx搭建HTTPS服务器和强制使用HTTPS访问的方法
2015/08/16 Python
Python字典,函数,全局变量代码解析
2017/12/18 Python
Python抓新型冠状病毒肺炎疫情数据并绘制全国疫情分布的代码实例
2020/02/05 Python
Python字典深浅拷贝与循环方式方法详解
2020/02/09 Python
Python爬虫实现vip电影下载的示例代码
2020/04/20 Python
Pandas将列表(List)转换为数据框(Dataframe)
2020/04/24 Python
python中@contextmanager实例用法
2021/02/07 Python
深入剖析HTML5 内联框架iFrame
2016/05/04 HTML / CSS
HTML5中外部浏览器唤起微信分享功能的代码
2020/09/15 HTML / CSS
syb养殖创业计划书
2014/01/09 职场文书
《我的第一本书》教学反思
2014/02/15 职场文书
励志演讲稿范文
2014/04/29 职场文书
本科毕业生自荐信
2014/06/02 职场文书
装饰工程师岗位职责
2014/06/08 职场文书
预备党员自我批评思想汇报
2014/10/10 职场文书
2015高考寄语集锦
2015/02/27 职场文书
餐厅营销的秘密:为什么老顾客会流水?
2019/08/08 职场文书
win11高清晰音频管理器在哪里?win11找不到高清晰音频管理器解决办法
2022/04/08 数码科技
索尼ICF-36收音机评测
2022/04/30 无线电