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

  • Z时代
  • 2024-02-06
  • 分类：IT

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 对象内属性动态变化无法触发视图更新（Vue2 可以）

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

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

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

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

回答：

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

回答：

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

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

以上是 Vue3 对象内属性动态变化无法触发视图更新（Vue2 可以） 的全部内容， 来源链接： utcz.com/p/936461.html

回到顶部