Vue视图不更新问题，响应式对象

由于Vue的更新机制，Vue.js 不能检测到对象属性的增、删。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。

出现状况：当你更新对象的值时，对应的值更新了，但是在页面视图层上并没有更新，但当你再更新data里面的某个值时，视图上才随之更新。

 

//部分代码
//在data里面声明一个对象
isOpen: {}
//初始化后以id为键，状态为值形成对象,isOpen的值为
{ 30:false }
//通过点击事件去修改对应id的状态isOpen的值为
{ 30:true }
//更改之后视图上对象isOpen[30]的显示状态并未更新，再随便更新一个data的值后才更新，没有做到响应更新

原因：主要原因就是键没有在data中定义，导致初始化实例时将属性转为 getter/setter ，setter里面无法劫持到对象的这个属性发生变化，进而去发布通知，订阅者们接到通知后更新数据。

有五种解决方案： 
方案一：利用Vue.set(object,key,val)

例：Vue.set(app.obj,'k1','v1')

这个和方法二都是用set更新

方案二：利用this.$set(this.obj,key,val)

this.$set(this.obj,'k1','v1')

this.$set(this.isOpen,companyId,oldValue)

如果上面的set方法不行的话：

方案三：利用Object.assign({}，this.obj)创建新对象

例： this.obj.k1='v1'； this.obj = Object.assign({}, this.obj) 或 this.obj = Object.assign({}, this.obj,{'k1','v1'})

change(companyId){

    const oldValue = !this.isOpen[companyId]
    var obj ={}
    obj[companyId] = oldValue
    this.isOpen = Object.assign({}, this.isOpen,obj)

}

方案四：使用…方法，数组或对象(推荐)

例：this.obj = [...this.obj] 或 this.obj = {...this.obj}

this.isOpen = {...this.isOpen}

方案五：使用 this.$forceUpdate() 进行强制更新

this.$forceUpdate();//要刷新的加一句这个就行