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

标签：处理   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