vue 改变数据后，数据变化页面不刷新

最近在开发中遇到了这样一些情况，通过点击事件改变了对象里面得数据，但是页面却不刷新，后来发现，是在给对象添加属性时出现的问题。

当vue的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的。

当页面初始化时候，vue会遍历data对象所有的属性，并使用object.defineProperty把这些属性全部转化为getter/setter，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。

// 在data中定义obj对象
data() {
  return {
    obj: {
        bfalse: false,
        name: 'zhang'
    }
  }
}
// 输出obj
console.log(this.obj)

可以看到是有get/set方法的（可以看到observer与value的...）

set.png

// 当通过方法给对象添加属性sex
add() {
  this.obj.sex = '男'
}
// 输出
console.log(this.obj)

sex1.png

可以看到新添加的属性是没有get/set的，是不会更新视图，但是会改变其值
解决：

官方定义：

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

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

add() {
  this.$set(this.obj, 'sex', '男')
}

sex2.png

大功告成

有时你想向已有对象上添加一些属性，例如使用 Object.assign() 或 _.extend() 方法来添加属性。但是，添加到对象上的新属性不会触发更新。

在这种情况下可以创建一个新的对象，让它包含原对象的属性和新的属性