Vue3 Proxy ? Vue2 Define Property 的不同?

看這篇了解 Object.definedProperty
看這篇了解 getter 與 setter

Vue2 Define Property

defineProperty的一個特性就是它只能對物件中其中一個屬性進行劫持。
這樣會碰到一個問題，當新增新的物件屬性obj.a = 1會無法被vue2劫持，必須使用vue2提供的$set方法來進行更新。

const a = { b: 1 };
Object.defineProperty(a,'b',{
  set: function() {},
  get: function() {}
});

當我們給a物件新增一個屬性的時候，當前新增的屬性並沒有被defineProperty劫持，雖然在對應的物件上依舊成功的生成了一個新的屬性，但是由於vue2是通過defineProperty的setter與getter進行資料劫持的，既然新增的資料並沒有被劫持，所以無論怎麼更新，頁面依舊不會重新渲染。