vue2 动态添加响应式数据

解决办法

• Vue.set()
• Object.assign()
• $forcecUpdated()

this.$set

vue无法监听的数组变化的场景

• 通过数组索引改变数组元素的值；

• 改变数组的长度；

解决无法监听数组变化的方法

• this.$set(target,index,val)

• 通过splice push pop shift unshift sort reverse

• 使用临时变量作为中转，重新赋值数组；

vue无法监听到对象变化的场景

• 对象的增加、删除无法被vue监听到

案例

新增加对象中的一个属性

	data(){
return	{
	person:{
	name:"wxj"
}
}
}
methods：
// 添加一个age字段
this.$set(this.person,age,18)

扩展

   // 直接 filter 不行，但可以重新赋值
    filterMore(){
      this.arr=this.arr.filter(item=>{
        return item>2
      })
    }

Object.assign(）

应创建一个新的对象，合并原对象和混入对象的属性

this.someObject = Object.assign({},this.someObject,{newProperty1:1,newProperty2:2 ...})

$forceUpdate

如果你实在不知道怎么操作时，可采取$forceUpdate()进行强制刷新 (不建议)
仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件