vue中改变数据,数据不刷新
当vue的data里边声明或者已经赋值过的对象或者数组(数组里边的值是对象)时,向对象中添加新的属性,如果更新此属性的值,是不会更新视图的。
当页面初始化时候,vue会遍历data对象所有的属性,并使用object.defineProperty把这些属性全部转化为getter/setter,所以属性必须在 data 对象上存在才能让 Vue 转换它,这样才能让它是响应的。
-
官方定义:
Vue 不允许在已经创建的实例上动态添加新的根级响应式属性 (root-level reactive property)。
-
解决方法:可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上:
add() { this.$set(this.obj, sex, 男) }
-
也可以使用 this.$forceUpdate() 方法,可以局部更新
迫使Vue实例重新渲染。它仅仅影响实例本身和插入插槽的子组件,而不是所有子组件
当发现没有get、set方法时,就可以考虑this.$set(obj, key, value),如下,每个属性要想刷新都必须要有这两个方法。