关于前端: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;}

比照

原本如同能够写很多话来形容这些，起初想想间接一个比照表格可能会显得更加清晰。