【Vue】为什么Vue3使用Proxy代替defineProperty？

先来看看 Vue2 中 defineProperty 来操作数据：

const obj = {a: 1,b: 2,c: {a: 1,b: 2}
}
function _isObject(v) {return typeof v === 'object' && v !== null;
}
function observe(object) {for (let key in object) {let v = object[key];if (_isObject(v)) {observe(v)}Object.defineProperty(object, key, {get() {console.log('read ' + key);return v;},set(val) {if (val !== v) {console.log('change ' + key);v = val;}}})}
}
observe(obj)
// obj.a = 3;
obj.c.a = 4;

所以 Vue2 的缺陷是无法监听到属性的增加和删除，因为只有 getter 和 setter 函数。此外，还通过深度遍历，有效率的损失，将属性变成 getter 和 setter 函数。

而 Vue3 中Proxy 直接监听整个对象的变化：

const obj = {a: 1,b: 2,c: {a: 1,b: 2}
}
function _isObject(v) {return typeof v === 'object' && v !== null;
}
function observe(obj) {const proxy = new Proxy(obj, {get(target, k) {let v = target[k]if (_isObject(v)) {v = observe(v);}console.log('read', k)return v;},set(target, k, val) {if (target[k] !== val) {target[k] = val;console.log('change', k)}}// ....})return proxy;
}proxy.a = 3;
proxy.aa;

不监听属性，而是监听整个代理对象。只有当读取到对象属性的时候才会进行遍历监听。