Vue 双向绑定原理

1. vue2 使用的是 Object.defineProperty

2. vue3 使用的是 proxy

通过对 data 中的数据进行劫持，添加 getter 和 setter，从而实现数据更新-视图更新。

Object.defineProperty

1. 作用

   1. 可以监听对象的某个属性，添加 getter 和 settter

      const obj = {};
      
      let name = '悟空';
      
      Object.defineProperty(obj, 'name', {
        get() {
          return name;
        },
        set(val) {
          console.log('set');
          name = val;
        },
      });
      console.log(obj.name);
      
      obj.name = '八戒';
      
      console.log(obj.name);

   2. 弊端

• 无法监听新增属性
• 无法监听对象深层次属性
• 无法监听数组 ['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse']; 等方法
• vue2中 使用 数组方法 push 找到数组的原型 来重写 ！！！

proxy

es6 新出的对象，翻译为代理。

不像 Object.defineProperty 监听的是属性，它监听的是整个对象。

1. 可以监听新增属性

2. 可以监听对象深层次属性

3. 可以监听数组 ['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse']; 等方法

const obj = {
  a: '悟空',
};

const proObj = new Proxy(obj, {
  get(target, key) {
    console.log('get');
    return target[key];
  },
  set(target, key, value) {
    target[key] = value;
  },
});

console.log(proObj);

proObj.a = 23;

console.log(proObj);