Vue3 tidak bertindak balas terhadap kemas kini dalaman medan kelas seperti Vue2

Question

Saya perasan bahawa dalam Vue2 anda boleh mengikat elemen pada sifat kelas dan elemen itu akan dikemas kini apabila sifat tersebut berubah dari suatu tempat di luar dunia Vue, tetapi ini nampaknya tidak berfungsi dalam Vue3 mungkin.

Saya telah mencipta dua contoh mudah di sini untuk menggambarkan maksud saya:

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

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

Terdapat kelas yang mempunyai pemasa dalaman yang akan menambah medan kelas. Dalam Vue2, elemen terikat kepada myClass.field dikemas kini dengan betul, tetapi dalam Vue3 tiada apa yang berlaku.

Soalan saya ialah

<强>1. Mengapa terdapat perbezaan antara Vue2 dan Vue3 di sini?

<强>2. Bagaimanakah saya boleh mencapai sesuatu seperti contoh Vue2 tetapi dalam Vue3?

Sila ambil perhatian bahawa saya tidak boleh menjalankan pemasa dalam kaedah kitaran hayat Vue. Medan kelas perlu dikemas kini sendiri.

Ini ialah kod Vue3 yang tidak berfungsi:

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

Buat objek proksi dalam Vue 3 untuk mendayakan kereaktifan seperti yang diterangkan dalam jawapan ini. this dalam pembina merujuk kepada contoh kelas asal dan bukannya proksi, jadi ia tidak boleh reaktif.

Penyelesaian adalah untuk memisahkan pembina kelas dan tetapan kesan sampingan yang menjangkakan this menjadi reaktif. Kaedah persediaan membolehkan corak antara muka yang lancar, menjadikannya lebih mudah untuk digunakan:

class MyClass {
  field = 0;

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

    return this;
  }
}

Dalam API pilihan ialah:

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

Dalam API gubahan ialah::

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