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

【问题标题】：Vue3 object render invalid，but vue2 successVue3对象渲染无效，但vue2成功
【发布时间】：2021-12-22 00:45:06
【问题描述】：

一个简单的演示

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')

【问题讨论】：

标签： javascript vue.js vuejs2 vuejs3

【解决方案1】：

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

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

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

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

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

【讨论】：