Una demostración sencilla
Plantilla HTML
<div id="app">{{ temp.progress }}</div>Instanciar objeto
class Temp { constructor () { this.start() } progress = 0 start () { setInterval(() => { this.progress += 1 }, 1000) } } const temp = new Temp()éxito de procesamiento de vue2 (visualización de página 1,2,3,4,5.......)
new Vue({ el: '#app', data () { return { temp } }, })pero vue3 no es válido (la visualización de la página siempre es 0)
Vue.createApp({ data() { return { temp } } }).mount('#app')Vue 3 crea un objeto Proxy en lugar de aumentar el objeto original en su lugar. Conceptualmente, puede pensar en ello como (en código vue3):
const dataObj = { temp }; const data = reactive(dataObj); dataObj es su objeto sin procesar y data son el proxy. Son dos objetos diferentes . Lo importante es que data son reactivos, pero dataObj no lo es. No se pueden observar todas las mutaciones directas en dataObj, porque las utilidades de observación están todas en los métodos de código auxiliar del objeto proxy.
Lo que está haciendo su clase Temp, efectivamente está mutando el objeto sin procesar, a eso this refiere.
Si su componente no posee sus datos, es decir, los datos deben externalizarse y transferirse, y se administrarán (mutarán) externamente, deberá crear un objeto reactivo y transferirlo a su componente.