vue 数据更新，视图未更新，原因，解决方法_vue视图更新,数据不更新的原因-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_37016928/article/details/100892360

在Vue应用中遇到数据classInfo更新但视图未响应的情况，原因是classInfo的属性未被劫持，即未响应化。解决方法包括：1. 初始化时定义classInfo的属性；2. 重新赋值classInfo对象；3. 使用`this.$set`设置classInfo的属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

复现问题：

<template>
    <div> 
        <p>{{classInfo.number}}<p>
        <p>{{classInfo.address}}<p>
    </div>
</template>
export default {
    
    data() {
        return {
            classInfo:{}
          }
    }
    
    created() {
        setTimeOut(()=>{
            this.classInfo.number = 100,
            this.classInfo.address = 'china',
        },1000)
    }
}

此时发现页面并没有获取到更新后的值，原因是：

classInfo,中属性，并没有被劫持，所以classInfo的数据不是响应式的。

数据被劫持一般有两种，第一，data初始化时data中的属性，虽然data中有classInfo属性，但是classInfo中并没有任何属性，所以classInfo的属性，没有在data中劫持，但是classInfo本身被劫持了

第二，是计算属性，很明显这不是计算属性

第三，使用set设置了这个属性，代码中没有设置。

因此根据上面的原因分析：有三种解决方案。

1.初始化的时候设置classInfo属性，使得初始化的时候能够劫持classInfo的属性。

data() {
    return {
        classInfo:{
            number: 0,
            address: '',
        }
    }
}

2.因为classInfo本身是被劫持了，所以可以重新赋值classInfo对象

created() {
    setTimeOut(()=>{
        this.classInfo={
            number: 100,
            address: 'china'
        }
    },1000)
}

3.this.$set(this.classInfo, 'number', 100) // 设置单个属性

// 设置多个属性

this.classInfo= Object.assign({}, this.classInfo, { number: 100, addredd: 'china' })