vue 下个版本中(3.0)为什么弃用Obeject.defineProperty 采用 proxy(es6)
都知道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