Vue3 不會像 Vue2 那樣對類別字段內部更新做出反應

Question

我注意到，在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(),
    };
  },
};

Answer 1

如此答案所述，在 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中它是::

const myClass = reactive(new MyClass()).init();