uniapp中初始化对象不赋值,后续属性无法绑定问题
比如初始化定义的对象是这样的
info: {},
但是我其实从后端数据获取值后,数据会变成这样
info: {flagStatus: null,},
但是会发现flagStatus这个属性是无法被跟踪到的
在uni-app中,以及在基于Vue.js的框架中,数据响应式依赖于数据对象的结构。当数据对象在初始化时仅声明为一个空对象 info: {}
,Vue.js 的响应式系统不会追踪这个空对象内部属性的变化。这意味着,如果你之后动态地添加属性到这个空对象上,例如 info.flagStatus
,这些属性的变化不会被侦测到,从而不会触发视图的更新。
这是因为在 Vue.js 初始化时,它会对数据对象进行递归遍历,将其所有可枚举的属性转换为 getter/setter 形式的属性,以便能够追踪它们的变化。如果一个属性在初始化时不存在,那么它就不会被转换,也就无法被 Vue.js 的响应式系统追踪。
因此,为了确保数据变化能够被正确侦测,你应该在初始化时明确地定义所有的数据属性,就像你提到的那样:
info: {flagStatus: null,},
这样,flagStatus
属性就会被 Vue.js 的响应式系统追踪,当你更新 info.flagStatus
时,视图会相应地更新。
另外,如果你确实需要动态添加属性,可以使用 Vue.set
或者 this.$set
方法,这可以确保新添加的属性也能被 Vue.js 的响应式系统追踪:
methods: {updateInfo() {this.$set(this.info, 'newProperty', 'newValue');},
}
使用 this.$set
方法可以确保即使是在运行时动态添加的属性也能触发视图的更新。