Vue3 reagiert nicht auf interne Aktualisierungen von Klassenfeldern wie Vue2

Question

Mir ist aufgefallen, dass man in Vue2 ein Element an eine Eigenschaft einer Klasse binden kann und das Element aktualisiert wird, wenn sich diese Eigenschaft von irgendwo außerhalb der Vue-Welt ändert, aber das scheint in Vue3 nicht zu funktionieren.

Ich habe hier zwei einfache Beispiele erstellt, um zu veranschaulichen, was ich meine:

Vue2: https://codesandbox.io/s/vue2-6hztv

Vue3: https://codesandbox.io/s/vue3-o2rfn

Es gibt eine Klasse mit einem internen Timer, der das Klassenfeld erhöht. In Vue2 wird das an myClass.field gebundene Element korrekt aktualisiert, in Vue3 passiert jedoch nichts.

Meine Frage ist

<强>1. Warum gibt es hier einen Unterschied zwischen Vue2 und Vue3?

<强>2. Wie kann ich so etwas wie das Vue2-Beispiel erreichen, aber in Vue3?

Bitte beachten Sie, dass ich innerhalb der Vue-Lebenszyklusmethoden keine Timer ausführen kann. Klassenfelder müssen sich selbst aktualisieren.

Dies ist der Vue3-Code, der nicht funktioniert:

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();