浅谈 JavaScript 数据双向绑定[Proxy/defineProperty]

let person = { name: 'hxb', age: 21 };
Object.defineProperty(person, 'newName', {
  get: function () {
    console.log('get...');
    return this.name;
  },
  set: function (newValue) {
    this.name = newValue;
    console.log('set...', newValue);
  }
});
console.log(person.newName); // get...，hxb
person.newName = 'oqm'; // set...，oqm
console.log(person.newName); // get...，oqm
console.log(person.name); // oqm
// 或者
function defineReactive(obj, key) {
  var value = obj[key] || '没有初始值'; // 采用闭包保存数据，且保持独立。
  Object.defineProperty(obj, key, {
    get: function () {
      console.log('get...');
      return value;
    },
    set: function (newValue) {
      value = newValue;
      console.log('set...', newValue);
    }
  });
}
defineReactive(person, 'name');
console.log(person.name); // get...，'hxb'
person.name = 'oqm'; // set... 'oqm'
console.log(person.name); //  get...，'oqm'

/* ------------------------------ 分割线 ------------------------------ */

let obj = { name: 'hxb', age: 21 };
let proxyObj = new Proxy(obj, {
  get: function (target, key) {
    console.log('get...', target, key);
    return key in target ? target[key] : 'not found';
  },
  set: function (target, key, value) {
    console.log('set...', target, key, value);
    target[key] = value;
    return true;
  }
});
console.log(proxyObj.a); // get... {name: 'hxb', age: 21} a，not found
console.log(proxyObj.name); // get... {name: 'hxb', age: 21} name，hxb
proxyObj.name = 'oqm'; // set... {name: 'hxb', age: 21} name，oqm
console.log(proxyObj); // Proxy {name: 'oqm', age: 21}
console.log(obj); // {name: 'oqm', age: 21}
obj.name = 'test'; // 不会触发 set
console.log(proxyObj); // Proxy {name: 'test', age: 21}
console.log(obj); // {name: 'test', age: 21}

function defineReactive(data, key, value) {
  Object.defineProperty(data, key, {
    enumerable: true,
    configurable: true,
    get: function () {
      console.log(`get key: ${key} value: ${value}`);
      return value;
    },
    set: function (newValue) {
      console.log(`set key: ${key} value: ${newValue}`);
      value = newValue;
    }
  });
}

function observe(data) {
  Object.keys(data).forEach(function (key) {
    defineReactive(data, key, data[key]);
  });
}

let testArr = [1, 2, 3];
observe(testArr);

testArr[0]; // get key: 0 value: 1
testArr[0] = 100; // set key: 0 value: 100

testArr.push(4); // 4
testArr; // [(...), (...), (...), 4]

性能问题：
Object.defineProperty 采用数据劫持的方式，中必须传入对应的 key 值，才能进行拦截数据，但是数组对象动态变化，则无法监听，必须每变化一次就再 observe 一次。
而 Vue3 中使用 Proxy 直接代理对象，传入 data 即可监听里面数据的变化，所以可以监听数组对象的动态变化。

import { def } from '../util/index';

// 复制数组构造函数的原型，Array.prototype也是一个数组。
const arrayProto = Array.prototype;
// 创建对象，对象的__proto__指向arrayProto，所以arrayMethods的__proto__包含数组的所有方法。
export const arrayMethods = Object.create(arrayProto);

// 下面的数组是要进行重写的方法
const methodsToPatch = ['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'];

/**
 * Intercept mutating methods and emit events
 */
// 遍历methodsToPatch数组，对其中的方法进行重写。
methodsToPatch.forEach(function (method) {
  // cache original method
  const original = arrayProto[method];
  // def 方法定义在 lang.js 文件中，是通过 Object.defineProperty 对属性进行重新定义。
  // 即在 arrayMethods 中找到我们要重写的方法，对其进行重新定义。
  def(arrayMethods, method, function mutator(...args) {
    const result = original.apply(this, args);
    const ob = this.__ob__;
    let inserted;
    switch (method) {
      // 上面已经分析过，对于push，unshift会新增索引，所以需要手动observe
      case 'push':
      case 'unshift':
        inserted = args;
        break;
      // splice方法，如果传入了第三个参数，也会有新增索引，所以也需要手动observe
      case 'splice':
        inserted = args.slice(2);
        break;
    }
    // push，unshift，splice 三个方法触发后，在这里手动 observe，其他方法的变更会在当前的索引上进行更新，所以不需要再执行 ob.observeArray。
    if (inserted) ob.observeArray(inserted);
    // notify change
    ob.dep.notify();
    return result;
  });
});

/**
 * Set a property on an object. Adds the new property and
 * triggers change notification if the property doesn't
 * already exist.
 */
export function set(target: Array<any> | Object, key: any, val: any): any {
  // 如果 target 是数组，且 key 是有效的数组索引，会调用数组的 splice 方法。
  // 我们上面说过，数组的 splice 方法会被重写，重写的方法中会手动 Observe。
  // 所以 Vue 的 set 方法，对于数组，就是直接调用重写 splice 方法。
  if (Array.isArray(target) && isValidArrayIndex(key)) {
    target.length = Math.max(target.length, key);
    target.splice(key, 1, val);
    return val;
  }
  // 对于对象，如果 key 本来就是对象中的属性，直接修改值就可以触发更新。
  if (key in target && !(key in Object.prototype)) {
    target[key] = val;
    return val;
  }
  // Vue 的响应式对象中都会添加了 __ob__ 属性，所以可以根据是否有 __ob__ 属性判断是否为响应式对象。
  const ob = (target: any).__ob__;
  // 如果不是响应式对象，直接赋值。
  if (!ob) {
    target[key] = val;
    return val;
  }
  // 调用 defineReactive 给数据添加了 getter 和 setter，
  // 所以 Vue 的 set 方法，对于响应式的对象，就会调用 defineReactive 重新定义响应式对象，defineReactive 函数。
  defineReactive(ob.value, key, val);
  ob.dep.notify();
  return val;
}

let obj = { prop1: 1 };
let proxyObj = new Proxy(obj, {
  get: function (target, key) {
    console.log('get...', target, key);
    return key in target ? target[key] : 'not found prop';
  },
  set: function (target, key, value) {
    console.log('set...', target, key, value);
    target[key] = value;
  }
});
console.log(proxyObj.prop1); // get... {prop1: 1} prop1，1
// 动态添加属性依旧可以监听
proxyObj.prop2 = 2; // set... {prop1: 1} prop2 2
console.log(proxyObj.prop2); // get... {prop1: 1, prop2: 2} prop2，2

/* ------------------------------ 分割线 ------------------------------ */

let arr = [1, 2, 3];
let proxyArr = new Proxy(arr, {
  get: function (data, index) {
    console.log('get...', data, index);
    return data[index] || 'not found index';
  },
  set: function (data, index, value) {
    console.log('set...', data, index, value);
    data[index] = value;
    return true;
  }
});
console.log(proxyArr[0]); // get... [1, 2, 3] 0，1
proxyArr.push(4); // set... [1, 2, 3] 3，4
// 动态添加依旧可以监听
console.log(proxyArr[3]); // get... [1, 2, 3, 4] 3，4