Me di cuenta de que, mientras que en Vue2 puede vincular un elemento a la propiedad de una clase, y el elemento se actualizará cuando esta propiedad de clase cambie desde algún lugar fuera del mundo de Vue, esto parece no ser posible en Vue3.
He creado dos ejemplos simples aquí para mostrar lo que quiero decir:
Vue2: https://codesandbox.io/s/vue2-6hztv
Vue3: https://codesandbox.io/s/vue3-o2rfn
Hay una clase que tiene un temporizador interno que incrementará el campo de la clase. En Vue2, el elemento vinculado a myClass.field se actualiza correctamente, pero en Vue3 no sucede nada.
mis preguntas son
1. ¿Por qué hay una diferencia entre Vue2 y Vue3 aquí?
2. ¿Cómo puedo lograr algo como el ejemplo funcional de Vue2 pero en Vue3?
Tenga en cuenta que no puedo ejecutar el temporizador en un método de ciclo de vida de Vue. El campo de clase necesita ser actualizado por sí mismo.
Aquí está el código Vue3 que no funciona:
HTML:
<div id="app">{{ myClass.field }}</div>JavaScript:
class MyClass { field = 0; constructor() { setInterval(() => { this.field++; }, 1000); } } export default { data() { return { myClass: new MyClass(), }; }, };Como se explica en esta respuesta , el objeto proxy se crea en Vue 3 para habilitar la reactividad. this in constructor se refiere a la instancia de clase original y no a un proxy, por lo que no puede ser reactivo.
La solución es separar el constructor de clases y la configuración de los efectos secundarios que esperan que this sea reactivo. Un método de configuración puede implementar un patrón de interfaz fluido para simplificar su uso:
class MyClass { field = 0; init() { setInterval(() => { this.field++; }, 1000); return this; } }En la API de opciones es:
data() { return { myClass: new MyClass(), }; }, created() { this.myClass.init(); }En la API de composición es:
const myClass = reactive(new MyClass()).init();