Vue数组更新的一点小技巧

背景：最近做项目的时候遇到一个问题：数据刷新了但是界面没刷新，弄了好久终于搞定了。

首先来看看官方文档：

由于 JavaScript 的限制，Vue 不能检测以下变动的数组：

1. 当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
2. 当你修改数组的长度时，例如：vm.items.length = newLength

举个例子：

var vm = new Vue({ data: { items: ['a', 'b', 'c'] } }) vm.items[1] = 'x' // 不是响应性的 vm.items.length = 2 // 不是响应性的

所以我的代码换种写法：

// state.inputChannel.channels[res.index].subtitle[res.subtitle.index] = res.subtitle

state. inputChannel. channels[ res. index]. subtitle. splice( res. subtitle. index)

state. inputChannel. channels[ res. index]. subtitle[ res. subtitle. index] = res. subtitle

然后，换成这种写法后我的界面就监听OK了