复现问题:
<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属性,使得初始化的时候