A simple demo
HTML Template
<div id="app">{{ temp.progress }}</div>
Instantiate object
class Temp {
constructor () {
this.start()
}
progress = 0
start () {
setInterval(() => {
this.progress += 1
}, 1000)
}
}
const temp = new Temp()
vue2 render success (page display 1,2,3,4,5.......)
new Vue({
el: '#app',
data () {
return { temp }
},
})
but vue3 render invalid (page display always 0)
Vue.createApp({
data() {
return { temp }
}
}).mount('#app')
Vue 3 creates Proxy object rather than augmenting the original object in place. Conceptually you can think of it as (in vue3 code):
const dataObj = { temp };
const data = reactive(dataObj);
dataObj is your raw object and data is the proxy. They are two different objects. The important thing is that data is reactive, but dataObj is not. All the direct mutations on the dataObj cannot be observed, because the observing utilities are all in the stub methods of the proxy object.
What your Temp class is doing, effectively it is mutating the raw object - that is what this refers to.
If your component does not own its data, i.e. the data needs to be externalized and passed in, and will be managed (mutated) externally, you will need to create a reactive object and pass it into your component.