Object.defineProperty和Proxy

Object.defineProperty问题

Object.defineProperty() 没法监控到数组下标的变化。vue只能经过如下几种方法来监听

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

以上几种方法也是通过vue内部处理后才能监听的。

只能劫持对象的属性,所以咱们须要对每一个对象的每一个属性进行遍历，若是属性值也是对象那么须要深度遍历,显然能劫持一个完整的对象是更好的选择。

Proxy

代理:对外暴露代理对象,操做的时候，表面上操做的是代理对象(proxy)，实际上改变的是目标对象 (target)，从而能够在操做代理对象的时候进行一些处理(handler)后，再传递到目标对象。

特色：

• 能够劫持整个对象，并返回一个新对象
• 有13种劫持操做
• Proxy是es6提供的，兼容性很差,没法用polyfill磨平

Proxy使用：

es6提供proxy构造函数，第一个参数target:是所要代理的目标对象，能够是空对象。第二个handler是拦截器，一个拦截器能够有多个拦截操做

var proxy = new Proxy(target, handler);

全部的对target的操做都落在proxy上了。

拦截操做一共有13个

• get

get(target, propKey, receiver)：拦截对象属性的读取 能够继承

• set

set(target, propKey, value, receiver)：拦截对象属性的设置，好比proxy.foo = v或proxy['foo'] = v，返回一个布尔值。

更多拦截器信息>>

Reflect

反射：经过类的类类型来操做类的属性。包含来对象语言内部的方法，一共有13种，和proxy一一对应，若是在Proxy中调用Reflect的话，其实对应的就是默认行为。

Proxy的this指向

虽然 Proxy 能够代理针对目标对象的访问， 但它不是目标对象的透明代理，即不作任何拦截的状况下，也没法保证与目标对象的行为一致。主要缘由就是在 Proxy 代理的状况下，目标对象内部的this关键字会指向 Proxy 代理。