Vue3 对象渲染无效，但 vue2 成功

Question

一个简单的演示

HTML 模板

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

实例化对象

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

    start () {
        setInterval(() => {
            this.progress += 1
        }, 1000)
    }
}

const temp = new Temp()

vue2渲染成功（页面显示1,2,3,4,5.......）

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

但是vue3渲染无效（页面显示总是0）

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

Answer 1

Vue 3 创建 Proxy 对象而不是就地扩充原始对象。从概念上讲，您可以将其视为（在 vue3 代码中）：

const dataObj = { temp };
const data = reactive(dataObj);

dataObj 是您的原始对象，data 是代理。 它们是两个不同的对象。重要的是 data 是反应性的，但 dataObj 不是。无法观察到 dataObj 上的所有直接突变，因为观察实用程序都在代理对象的存根方法中。

你的 Temp class 正在做什么，实际上它正在改变原始对象 - 这就是 this 所指的。

如果您的组件不拥有它的数据，即数据需要外部化和传入，并且将在外部进行管理（变异），您将需要创建一个反应对象并将其传递到您的组件中。

Vue3 对象渲染无效，但 vue2 成功

Vue3 object render invalid，but vue2 success

javascript

vue.js

vuejs2

vuejs3