看這篇了解 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進行資料劫持的,既然新增的資料並沒有被劫持,所以無論怎麼更新,頁面依舊不會重新渲染。
Vue3 Proxy
Proxy 可以理解成,在目標對象之前架設一層攔截,外界對該對象的訪問,都必須先通過這層攔截,因此提供了一種機制,可以對外界的訪問進行過濾和改寫。
proxy也可看做對於資料的代理,它能夠響應新增的屬性,當新增一個屬性的時候,可以響應到get中,對當前物件進行代理
參考文章:
https://es6.ruanyifeng.com/#docs/proxy
https://www.796t.com/article.php?id=133363
https://codertw.com/%E7%A8%8B%E5%BC%8F%E8%AA%9E%E8%A8%80/697272/