監聽JS對象屬性變化 Object.defineProperty Proxy 記錄

引用：https://www.jianshu.com/p/2df6dcddb0d7

https://blog.csdn.net/qq_42833001/article/details/83302149

Object.defineProperty 不足

• 無法監聽數組的變化： 數組的這些方法是無法觸發set的:push, pop, shift, unshift,splice, sort, reverse.，vue中能監聽是因為對這些方法進行了重寫
• 只能監聽屬性，而不是監聽對象本身，需要對對象的每個屬性進行遍歷。對於原本不在對象中的屬性難以監聽。

const obj = {};
Object.defineProperty(obj, 'text', {
  get: function() {
    console.log('get val'); 
  },
  set: function(newVal) {
    console.log('set val:' + newVal);
    document.getElementById('input').value = newVal;
    document.getElementById('span').innerHTML = newVal;
  }
});

const input = document.getElementById('input');
input.addEventListener('keyup', function(e){
  obj.text = e.target.value;
})

 

Proxy優點

• 可以監聽數組變化
• 監聽的是對象本身
• 有13種攔截方法

const input = document.getElementById('input');
const p = document.getElementById('p');
const obj = {};

const newObj = new Proxy(obj, {
  get: function(target, key, receiver) {
    console.log(`getting ${key}!`);
    return Reflect.get(target, key, receiver);
  },
  set: function(target, key, value, receiver) {
    console.log(target, key, value, receiver);
    if (key === 'text') {
      input.value = value;
      p.innerHTML = value;
    }
    return Reflect.set(target, key, value, receiver);
  },
});

input.addEventListener('keyup', function(e) {
  newObj.text = e.target.value;
});