关于前端: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>// jsconst data = {};// defineProperty只能监听对象的繁多属性，如果须要监听所有属性则须要遍历增加watchwatch(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;}

比照

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