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调试工具(下载)
Jan 09 Javascript
JavaScript 特殊字符
Apr 05 Javascript
JS控件ASP.NET的treeview控件全选或者取消(示例代码)
Dec 16 Javascript
js实现多选项切换导航菜单的方法
Feb 06 Javascript
js编写贪吃蛇的小游戏
Aug 24 Javascript
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
Feb 02 Javascript
对Js OOP编程 创建对象的一些全面理解
Jul 26 Javascript
Javascript OOP之面向对象
Jul 31 Javascript
Angularjs渲染的 using 指令的星级评分系统示例
Nov 09 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
Dec 12 Javascript
微信小程序发布新版本时自动提示用户更新的方法
Jun 07 Javascript
layui扩展上传组件模拟进度条的方法
Sep 23 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
经典的PHPer为什么被认为是草根?
2007/04/02 PHP
手把手教你使用DedeCms V3的在线采集图文教程
2007/04/03 PHP
THINKPHP2.0到3.0有哪些改进之处
2015/01/04 PHP
CentOS 安装 PHP5.5+Redis+XDebug+Nginx+MySQL全纪录
2015/03/25 PHP
详解PHP对象的串行化与反串行化
2016/01/24 PHP
ThinkPHP自定义Redis处理SESSION的实现方法
2016/05/16 PHP
Yii2.0中的COOKIE和SESSION用法
2016/08/12 PHP
PHP从零开始打造自己的MVC框架之路由类实现方法分析
2019/06/03 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
2020/02/27 PHP
autoPlay 基于jquery的图片自动播放效果
2011/12/07 Javascript
二叉树的非递归后序遍历算法实例详解
2014/02/07 Javascript
浅谈javascript中字符串String与数组Array
2014/12/31 Javascript
jQuery入门介绍之基础知识
2015/01/13 Javascript
微信小程序 引用其他js文件实现代码
2017/02/22 Javascript
Bootstrap超大屏幕的实现代码
2017/03/22 Javascript
ES6新特性之Symbol类型用法分析
2017/03/31 Javascript
浅谈struts1 & jquery form 文件异步上传
2017/05/25 jQuery
详解Node.js 命令行程序开发教程
2017/06/07 Javascript
解决ie img标签内存泄漏的问题
2017/10/13 Javascript
[01:51]2014DOTA2国际邀请赛 这个赛场没有失败者VGTi5再见
2014/07/23 DOTA
Python引用类型和值类型的区别与使用解析
2017/10/17 Python
Python实现文件信息进行合并实例代码
2018/01/17 Python
Python 多线程不加锁分块读取文件的方法
2018/12/11 Python
Pycharm自动添加文件头注释和函数注释参数的方法
2020/10/23 Python
matplotlib绘制鼠标的十字光标的实现(自定义方式,官方实例)
2021/01/10 Python
html5 Canvas画图教程(1)—画图的基本常识
2013/01/09 HTML / CSS
以太网Ethernet IEEE802.3
2013/08/05 面试题
Servlet方面面试题
2016/09/28 面试题
无故旷工检讨书
2014/01/26 职场文书
中秋节超市促销方案
2014/01/30 职场文书
2014年行政部工作总结
2014/11/19 职场文书
安娜卡列尼娜观后感
2015/06/11 职场文书
详解MongoDB的条件查询和排序
2021/06/23 MongoDB
Flask response响应的具体使用
2021/07/15 Python
各国货币符号大全
2022/02/17 杂记
Python+Selenium实现读取网易邮箱验证码
2022/03/13 Python