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 代理。