vue3为什么使用Proxy代替Object.defineProperty

数据劫持

Object.defineProperty

使用 Object.defineProperty 当 获取 或者 设置 对象的 属性 的时候，触发get、set方法，实现变化的监听

const data = {
        name: "xiaoming",
        sex: "男",
      };
      // 遍历对象,对其属性值进行劫持
      Object.keys(data).forEach((key) => {
        let val = data[key];
        Object.defineProperty(data, key, {
          enumerable: true, // 该属性可被枚举
          configurable: true, // 该属性可以被删除以及属性描述符可以被改变
          get() {
            console.log(`属性值${key}当前值为${val}`);
            return val;
          },
          set(newValue) {
            console.log(`监听到属性值${key}由${val}变为${newValue}`);
            val = newValue;
          },
        });
      });
 
data.name // 属性值name当前值为xiaoming
data.name = 'huahua' // 监听到属性值name由xiaoming变为huahua
data.sex // 属性值sex当前值为男
data.sex = '女' // 监听到属性值sex由男变为女

数据劫持的优势

1.不需要进行显示调用，vue的双向绑定原理就是通过数据劫持+发布订阅来实现的，比如angular的脏检查需要通过显示调用markForCheck，react则需要通过setState来进行显示调用
2.通过属性的劫持可以精准获得变化的内容，这部分不需要额外的diff操作，减少性能消耗

Object.defineProperty缺陷

1. 如果属性值也是对象，那么进行数据劫持就需要深度遍历了，这时候显然能够劫持完整对象更好
2. 性能问题 ：数组 和 对象 新增 元素 或 属性 的时候，Object.defineProperty无法监听，需要人为手动更新实现监听

Proxy的优势

1. Proxy可以直接监听对象而非属性，并返回一个新对象
2. Proxy可以直接监听数组的变化

未完待续…