Vue数组更新后，页面上没有动态刷新问题

前言
Vue数组更新后，页面上没有动态刷新问题，在看这个问题之前，我们首先来了解下Vue数据响应式的原理。

Vue数据响应式的原理：
通过ES5的保护对象的Object.defineProperty中的访问器属性中的get和set方法，data中声明的属性都被添加了访问器属性，当读取data中的数据时，自动调用get方法；当修改data中的数据时，自动调用set方法。检测到数据变化，会通知观察者，观察者自动触发重新渲染组件。

开发中发现，通过数组索引赋值时，数据更新了，但视图并未刷新，还是显示的旧的值。

即通过以下索引方式赋值：

result[0][0] = 1;

问题原因：

通过索引修改数组时，并不能够触发set方法。

解决方法：
直接通过set方法修改，语法如下：

// 页面引入vue
import Vue from 'vue'
...
// 通过Vue.set修改数组数据
Vue.set(vm.items, indexOfItem, newValue)

例如：
Vue.set(result[index], i, {reqId: i});

如此，在修改数组数据后，即可同时动态刷新页面。

示例：

如下图示，接口响应回来后，通过Vue.set更新列表数组数据。

network_02.png

（完）