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

最新推荐文章于 2024-06-18 11:55:12 发布

转载最新推荐文章于 2024-06-18 11:55:12 发布 · 247 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yayaonly/p/11290273.html

文章标签：

#javascript #ViewUI

本文探讨了Vue.js框架中动态添加响应式属性的问题。官方文档指出，Vue无法检测对象属性的添加或删除，因此在实例创建后添加的新属性不会触发视图更新。为解决此问题，可以使用Vue.set或vm.$set方法来动态添加响应式属性，确保页面正确更新。

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

根据官方文档定义：

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

受现代 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的方法就可以更新页面了