我注意到，在Vue2 中，您可以將元素綁定到類別的屬性，並且當此類屬性從Vue 世界之外的某個位置更改時，該元素將會更新，但這在Vue3 中似乎不可能。
我在這裡創建了兩個簡單的範例來說明我的意思：
Vue2：https://codesandbox.io/s/vue2-6hztv
Vue3：https://codesandbox.io/s/vue3-o2rfn
有一個類別有一個內部計時器，它將增加類別欄位。在 Vue2 中，綁定到 myClass.field 的元素已正確更新，但在 Vue3 中沒有任何反應。
我的問題是
<强>1。為什麼這裡Vue2和Vue3有差別？
<强>2。我怎麼能實現類似 Vue2 範例但在 Vue3 中的效果？
請注意，我無法在 Vue 生命週期方法中執行計時器。類別字段需要自行更新。
這是不起作用的 Vue3 程式碼：
HTML：
<div id="app">{{ myClass.field }}</div>
Javascript：
class MyClass {
field = 0;
constructor() {
setInterval(() => {
this.field++;
}, 1000);
}
}
export default {
data() {
return {
myClass: new MyClass(),
};
},
}; 
如此答案所述，在 Vue 3 中建立代理物件以啟用反應性。建構子中的
this引用原始類別實例而不是代理，因此它不能是響應式的。解決方案是將類別建構子和期望
this具有反應性的副作用設定分開。設定方法可以實現流暢的介面模式，使其更易於使用：class MyClass { field = 0; init() { setInterval(() => { this.field++; }, 1000); return this; } }在選項 API 中它是：
data() { return { myClass: new MyClass(), }; }, created() { this.myClass.init(); }在組合API中它是::