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

比照

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