Vue3 Proxy ? Vue2 Define Property 的不同?


Posted by hoyi-23 on 2021-08-12

看這篇了解 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/


#proxy #DefinedProperty







Related Posts

DAY11:Disemvowel Trolls

DAY11:Disemvowel Trolls

3.  React 語法糖:JSX

3. React 語法糖:JSX

非對稱加密和簽名認證

非對稱加密和簽名認證


Comments