更改 class 中的值不會觸發 Vue 3 中的手表

Question

我有一個 class 我在我的 Vue3 組件中使用它來設置/重置/更新一些值。 我依靠 Vue Watchers 來查看我應用的 state 是否在所述 class 中發生了變化，以便能夠對其進行處理（例如，調用 API 端點）。

現在這在 Vue 2 中工作得非常好，但由於某種原因，如果我從 class 內部改變一個變量，它不會觸發我的手表 function。 但是，當我從組件設置值時，它確實會觸發我的手表 function； 但從長遠來看，該選項對我不起作用。

簡而言之：

當我從組件和 Class 實例本身設置值時，如何確保觸發手表？

檢查我的演示（並打開控制台以獲取一些額外的日志記錄）以了解我的意思：（預期的行為是應在 1 秒內將applied設置為 3，在 3 秒后設置為 100） https://codepen.io/Timen/pen/ JjLMawO

我嘗試過的事情：

• 使用組合 API 並在我的設置中設置觀察者
• 使用watchEffect
• 使用deep: true和flush: post
• 設置一個全新的項目，除了 vite 3 + vue3 之外沒有其他依賴項，甚至嘗試使用 vue-cli 4.5 + vue3 進行干凈構建
• 在我的setup中將我的 class 包裝在ref()中
• 嘗試通過Object.assign設置應用值

Answer 1

在 Vue3 中，由於你的數據myClass是一個TestClass實例的代理，在 1 秒，你看到了myClass代理的值，但是在 3 秒，你改變的是你代理的源數據，所以你不能看到代理源的變化。

// in vue3
data:{
   a: b
   //means：a = new Proxy(b), you cannot watch the data b changes in vue or other observer.
}

不是 Vue3 的不足，是proxy的規范