vue新增属性响应式更新的问题

Posted 2022-06-05 yayaonly

根据官方文档定义：

　　如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。

受现代 javascript 的限制 (以及废弃 Object.observe)，Vue 不能检测到对象属性的添加或删除。

由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。

官方定义：

Vue 不允许在已经创建的实例上动态添加新的根级响应式属性 (root-level reactive property)。

但是它可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上：

Vue.set(vm.obj, ‘e‘, 0)
您还可以使用 vm.$set 实例方法，这也是全局 Vue.set 方法的别名：

this.$set(this.obj,‘e‘,02)

for(var item in interim.message)
    // vue.devstatus[item] = interim.message[item];
    vue.$set(vue.devstatus,item,interim.message[item]);

　　如上代码：interim.message是我从后台获得到的数据，想要将里边的数据的key和value保存在vue.devstatus中，使用第一种方式vue.devstatus[item] = interim.message[item]；不能实现更新页面，使用vue.$set的方法就可以更新页面了