码迷,mamicode.com
首页 > 其他好文 > 详细

vue 下个版本中(3.0)为什么弃用Obeject.defineProperty 采用 proxy(es6)

时间:2019-04-16 16:10:30      阅读:141      评论:0      收藏:0      [点我收藏+]

标签:处理   eject   属性   参数   性能   添加   详情   关注   初始   

都知道VUE 中 数据劫持采用的是 Obeject.defineProperty,  Obeject.defineProperty(obj,prop,{}),第三参数是属性描述符,该描述符有两种形式,1:存取描述符,2:数据描述符,

存取描述符中 里有 setter 和getter 函数,他们分别监听数据的读取和修改操作。然后 通过递归遍历劫持对象中所有属性。 

proxy:词面上意思是代理,其实就是词面上意思 它能代理 对象,然后做一些自定义行为, Proxy(target, handle), Proxy是个构造函数, target 是代理的对象(目标对象),handle对象 就是对代理的对象做一些自定义操作(查询,赋值,函数调用等),具体见mdn文档。

那为什么vue下个版本,改用 Proxy呢?, 主要以下几点:

  1: 受现代 JavaScript 的限制 (而且 Object.observe 也已经被废弃),Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程,所以属性必须在 data 对象上存在才能让 Vue 转换它,这样才能让它是响应的。
  2:vue中无法监听数组下标的变化,(主要是考虑性能问题),所以通过下标来设置数组的内容是,vue是无法监听到的。当然就以上这两种,vue也是给出了相应的hack.详情见官网。

  3:proxy 是直接代理 整个对象,然后返回一个新对象。有13种操作行为,例如 读取,修改,函数调用,in 操作符等等。详情见mdn 文档。

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

 

参考资料见:http://www.10tiao.com/html/780/201812/2650588659/1.html

vue 下个版本中(3.0)为什么弃用Obeject.defineProperty 采用 proxy(es6)

标签:处理   eject   属性   参数   性能   添加   详情   关注   初始   

原文地址:https://www.cnblogs.com/aloneWang/p/10717669.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!