Vue3 对象内属性动态变化无法触发视图更新（Vue2 可以）

Question

HTML 部分

<div id="app">{{ temp.progress }}</div>

实例化对象, 该对象内 progress 每秒 += 1

class Temp {
    constructor () {
        this.start()
    }
    progress = 0

    start () {
        setInterval(() => {
            this.progress += 1
            // F12 Console 内可以看出 progress 不断自增
            console.log(this.progress)
        }, 1000)
    }
}

const temp = new Temp()

若使用 vue2，在浏览器中可以看到 {{ temp.progress }} 会发生变化

new Vue({
    el: '#app',
    data () {
        return { temp }
    },
})

若使用 vue3，在浏览器中 {{ temp.progress }} 无任何变化

Vue.createApp({
    data() {
        return { temp }
    }
}).mount('#app')

猜测可能与 vue2 观察者模式，vue3 代理模式有关，想知道在 vue3 中如何实现渲染

Answer 1

setup() {
// 用vue3这个生命周期, 还有ref()定义变量, 就能实时更新
}

Answer 2

vue3需要用ref()包裹变量，
所以大概长这样

data(){
    return{
        temp:ref(0)
    }
},
mounted(){
    start()
},
motheds:{
    start () {
        setInterval(() => {
            temp.value += 1
        }, 1000)
    }
}