Vue3 ne réagit pas aux mises à jour internes des champs de classe comme le fait Vue2

Question

J'ai remarqué que dans Vue2, vous pouvez lier un élément à une propriété d'une classe et que l'élément sera mis à jour lorsque cette propriété changera de quelque part en dehors du monde Vue, mais cela ne semble pas fonctionner possible dans Vue3.

J'ai créé deux exemples simples ici pour illustrer ce que je veux dire :

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

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

Il existe une classe qui a une minuterie interne qui incrémentera le champ de classe. Dans Vue2, l'élément lié à myClass.field est mis à jour correctement, mais dans Vue3 rien ne se passe.

Ma question est

<强>1. Pourquoi y a-t-il une différence entre Vue2 et Vue3 ici ?

<强>2. Comment puis-je réaliser quelque chose comme l'exemple Vue2 mais dans Vue3 ?

Veuillez noter que je ne peux pas exécuter de minuteries dans les méthodes de cycle de vie de Vue. Les champs de classe doivent se mettre à jour.

Voici le code Vue3 qui ne fonctionne pas :

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

Créez des objets proxy dans Vue 3 pour activer la réactivité comme décrit dans cette réponse. Le this dans le constructeur fait référence à l'instance de classe d'origine plutôt qu'au proxy, il ne peut donc pas être réactif.

La solution consiste à séparer le constructeur de classe et les paramètres d'effets secondaires qui s'attendent à ce que this soit réactif. La méthode de configuration permet un modèle d'interface fluide, ce qui facilite son utilisation :

class MyClass {
  field = 0;

  init() {
    setInterval(() => {
      this.field++;
    }, 1000);

    return this;
  }
}

Dans l'API des options c'est :

data() {
    return {
      myClass: new MyClass(),
    };
  },
  created() {
    this.myClass.init();
  }

Dans l'API de composition c'est ::

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