官网——深入响应式原理(https://cn.vuejs.org/v2/guide...)中介绍到:受现代 JavaScript 的限制 (以及废弃 Object.observe),Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程,所以属性必须在 data 对象上存在才能让 Vue 转换它,这样才能让它是响应的。

上面的a是响应式的,所以a的改变后会自动渲染页面;
但是b是在vm实例创建之后添加的属性,所以他不是响应式的,当我们改变b的值的时候,通过DevTool看到的数据并不会改变,除非我们在DevTool中刷新数据,而且页面也不会刷新。

有三种解决方案:

1、方案一:利用Vue.set(object,key,value)

Vue.set(vm.obj,"sex","man")

2、方案二:利用this.$set(this.object,key,value)

this.$set(this.obj,"sex","man")

3、方案三:利用Object.assign({},this.obj)

this.obj.sex = "man";
this.obj = Object.assign({},this.obj)


//或者下面方式

this.obj = Object.assign({ },this.obj,{"sex","man"})

Logo

前往低代码交流专区

更多推荐