defineProperty与Proxy的差异对比

不管你是否使用过vue，多多少少应该也了解过vue的使用原理，也就是我们经常说的数据劫持。在vue2中使用的是Object.defineProperty实现的，而在vue3中则是使用的Proxy。

defineProperty

使用defineProperty实现一个简单的数据劫持（数据监听）。

const watch = (target, property, callback) => {
    // 这里新增一个_value字段用于临时存储
    let _value = target[property];

    Object.defineProperty(target, property, {
        get() {
            return _value;
        },
        set(newVal) {
            const original = _value;
            // 这里将值赋值给_value而不是target[property]是为了防止陷入无限循环
            // target[property] = newVal又将会触发set
            _value = newVal;
            callback && callback(newVal, original);
        }
    });
}

// 测试
// html
<input id="input" />
<div id="text"></div>

// js
const data = {};
// defineProperty只能监听对象的单一属性，如果需要监听所有属性则需要遍历添加watch
watch(data, 'text', (newVal) => {
    text.innerText = newVal;
});
input.oninput = (e) => {
    data.text = e.target.value;
}

Proxy

同样的，我们使用Proxy也来实现一个watch。

const watch = (target, callback) => {
    return new Proxy(target, {
        get(target, property) {
            return target[property];
        },
        set(target, property, value) {
            const original = target[property];
            target[property] = value;
            callback && callback(value, original);
        }
    });
}

// 测试
// html
<input id="input" />
<div id="text"></div>

// proxy和defineProperty的使用方式略有不同
// 必须对proxy实例进行操作才会触发数据劫持
const data = {};
const p = watch(data, (n, o) => {
    text.innerText = n;
});
input.oninput = (e) => {
    p.text = e.target.value;
}

对比

本来好像可以写很多话来描述这些，后来想想直接一个对比表格可能会显得更加清晰。

特性	defineProperty	Proxy
是否可监听数组变化	否（vue中对数组的几种常用方法进行了hack）	是
是否可以劫持整个对象	否（只能通过遍历的方式）	是
兼容性	支持主流浏览器(IE8及以上)	不支持IE
操作时是否对原对象直接操作	是	否（需要对Proxy实例进行操作）
可劫持的操作	get、set	get、set、defineProperty、has、apply等13种