vue3 響應式

青橙娃娃發表於2024-05-21
  1. Vue3中的響應性使用了Proxy物件來替代Vue2中的Object.defineProperty。
    而Proxy物件只能對整個物件進行攔截,而無法對物件的屬性進行攔截。
    因此,在使用解構賦值時,解構的物件會被轉化為普通的JavaScript物件,而丟失了Vue3的響應性。

  2. 解構賦值實際上是建立一個新的物件,這個物件與原始物件不再具有相同的引用且沒有經過響應性劫持 ,不再與Vue3的響應式系統關聯

  3. 解決方案:

    可以使用toRefs函式來將解構賦值的結果轉換為響應式的。toRefs函式可以接收一個響應式物件,並將其轉換為具有響應性的Ref物件。這樣,解構賦值的結果物件就能夠保持響應性。

    reactive函式將解構賦值的結果物件轉化為響應式物件。reactive函式可以接收一個普通的JavaScript物件並返回一個具有響應性的Proxy物件,從而保持物件的響應性。

總結起來,Vue3中的解構賦值會丟失響應性是因為解構賦值建立了一個新的物件,該物件不再具有Vue3的響應性

這個很牛
https://blog.csdn.net/song854601134/article/details/127284112

相關文章