解决vue项目中数据更新但无法刷新视图的问题

问题描述：当我们在做项目中，会遇到很常见的这种问题，例如：我一个数组从后台获取数据，进行表格渲染，当点击表格某一行时，查询表格该行下的子级数据，并显示。所以我们的做法通常会是点击调用接口，获取数据，并把数据给原有的数组的children数组赋值。这样做的结果就是：点击第一次，数据确实请求回来了，也在children下面，但是视图并不更新，点击第二次才更新。

分析原因:

你仔细阅读vue的官方文档时你会发现，在列表渲染模块其中有这么一段话：

 

 

简单来说，就是这样直接赋值vue是监测不到数据变化而不会实时更新视图。

解决办法：

数组：

（例如我要在一个数组的对象中增加一个children数组）

 this.$set(this.data[i], 'children', list)

当我换成这个方法后，点击直接更新了视图，解决了这个问题

或者：

this.$set(this.items, indexOfItem, newValue) (items：要改变的数组，indexOfItem:数组下标，newValue：新的值)

对象：

this.$set(this.userProfile, 'age', 27)(改变一个对象的值)

或者改变对个对象的值：

this.userProfile = Object.assign({}, this.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})

相当于用一个空对象去接收这个对象的值，并把这个空对象赋值给原对象进行覆盖