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(),
};
},
}; 
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Buat objek proksi dalam Vue 3 untuk mendayakan kereaktifan seperti yang diterangkan dalam jawapan ini.
thisdalam 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
thismenjadi 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::