首页 > Web开发 > JavaScript教程 > 正文

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

互联网 2019-09-09 23:29:30 0

熟悉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中的双向数据绑定方法及优缺点,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对web开发者网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

  • 相关标签:
  • 版权归原作者所有,如果有侵犯到您的权益,请联系本站删除!
  • 相关文章


    • 暂无相关信息

    专题推荐

    今日头条
  • 手机哪款好?8月值得买的手机就这四款 手机哪款好?8月值得买的手机就这四款
  • 七夕保命技能书送上 女朋友还有30秒到达战场 七夕保命技能书送上 女朋友还有30秒到达战场
  • 七夕保命技能书送上 女朋友还有30秒到达战场 七夕保命技能书送上 女朋友还有30秒到达战场
  • 七夕搞笑句子大全2019 七夕微信说说笑死人那种 七夕搞笑句子大全2019 七夕微信说说笑死人那种
  • 热门标签