vue从defineproperty到Proxy

前言

Vue 2.0从ES5的defineproperty 到ES6的Proxy，我们来看下它们的区别与各自的有缺点。

defineProperty监听数组变化

我们从手摸手实现双向绑定的MVVM文章中了解到defineProperty相关特性，
我们再开举个监听数组变化的例子：

function defineRacctive(data, key, value) {
    // 这里 data是数组， key是下标 value是下标对应的值
    Object.defineProperty(data, key, {
        enumerable: true,
        configurable: true,
        get:function() {
            console.log(`获取下标key:${key}   值value:${value}`);
            return value
        },
        set: function(newVal) {
            console.log(`设置下标key:${key}   值value:${value}`);
            value = newVal
        }
    })
}
function observe(data) {
    Object.keys(data).forEach(function(key) {
        defineRacctive(data, key, data[key]);
    }) 
}
let arr = [1,2,3]
observe(arr);

上面的代码数组中每一个属性都通过Object.defineProperty进行劫持，下面我们对数组arr进行操作，看看那些行为会触发数组的getter和setter。

console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);

image.png

可以看到，通过下标获取某个元素会触发 getter 方法, 设置某个值会触发 setter 方法。

接下来，我们再试一下数组的一些操作方法，看看是否会触发

arr.push(4);
console.log(arr);

image.png

可以看到 push并没有触发getter和setter，新增的数值4 也没有受到监听，这就有些符合一些人说认为 Object.defineProperty 有一个缺陷是无法监听数组变化。
但是如果手动obseve呢？

let arr = [1,2,3]
observe(arr);
// console.log(arr[0]);
// console.log(arr[1]);
// console.log(arr[2]);

arr.push(4);
observe(arr);
console.log(arr[3]);

image.png

这和对象的处理是同样的，数组的索引被删除后，就相当于对象的属性被删除一样，不会再去触发 observe。
我们总结下：
Object.defineProperty 在数组中的表现和在对象中的表现是一致的，数组的索引就可以看做是对象中的 key。
1.通过索引访问或设置对应元素的值时，可以触发 getter 和 setter 方法。
2.通过 push 或 unshift 会增加索引，对于新增加的属性，需要再手动初始化才能被 observe。

所以，Object.defineProperty是有监控数组下标变化的能力的，只是 Vue2.x 放弃了这个特性。

Object.defineProperty 和 Proxy

上面已经知道 Object.defineProperty 对数组和对象的表现是一致的，那么它和 Proxy 对比存在哪些优缺点呢？
1. Object.defineProperty 只能劫持对象的属性，而 Proxy 是直接代理对象。
由于 Object.defineProperty 只能对属性进行劫持，需要遍历对象的每个属性，如果属性值也是对象，则需要深度遍历。而 Proxy 直接代理对象，不需要遍历操作。
2. Object.defineProperty 对新增属性需要手动进行 Observe。
由于 Object.defineProperty 劫持的是对象的属性，所以新增属性时，需要重新遍历对象，对其新增属性再使用 Object.defineProperty 进行劫持。
也正是因为这个原因，使用 Vue 给 data 中的数组或对象新增属性时，需要使用 vm.$set 才能保证新增的属性也是响应式的。（其实它里面也是用到判断从新observe加上getter和setter）
如果采用 proxy 实现，Proxy 通过 set(target, propKey, value, receiver) 拦截对象属性的设置，是可以拦截到对象的新增属性的。😄
同样举一个数组的例子

const target = [];
const handler = {
    set(target, key, value) {
        console.log(key,"set");
        target[key] = value;
        return value;
    }
}
const proxy = new Proxy(target, handler);
proxy.push(1);
proxy.push(2);
console.log(target);

image.png

哇塞😍
3.Proxy支持 13 种拦截操作，这是 defineProperty 所不具有的。

具体可以细看阮一峰老师的ES6.
4. 新标准性能红利
Proxy 作为新标准，从长远来看，JS 引擎会继续优化 Proxy，但 getter 和 setter 基本不会再有针对性优化。
5. Proxy 兼容性差
可以看到，Proxy 对于 IE 浏览器来说简直是灾难。

并且目前并没有一个完整支持 Proxy 所有拦截方法的 Polyfill 方案，有一个 Google 编写的 proxy-polyfill 也只支持了 get、set、apply、construct 四种拦截，可以支持到 IE9+ 和 Safari 6+。

总结

1.Object.defineProperty 并非不能监控数组下标的变化，Vue2.x 中无法通过数组索引来实现响应式数据的自动更新是 Vue 本身的设计导致的，不是 defineProperty 的锅。
2.Object.defineProperty 和 Proxy 本质差别是，defineProperty 只能对属性进行劫持，所以出现了需要递归遍历，新增属性需要手动 Observe 的问题。
3.Proxy 作为新标准，浏览器厂商势必会对其进行持续优化，但它的兼容性也是块硬伤，并且目前还没有完整的 polyfill 方案。

参考文章：
https://mp.weixin.qq.com/s/O8iL4o8oPpqTm4URRveOIA
https://juejin.im/post/5acd0c8a6fb9a028da7cdfaf

加油😘