vue数组渲染问题

以下代码为echart所实现的一个图表，对其新增了一个排序功能，采用冒泡排序思想，对每一项进行排序，我们对数组进行变动，在控制台可以看到数组已经发生变动，但是页面的数据显示还是未发生改变，查了下原因是由于JS的限制，vue不能检测到变动的数组，需要使用vue.set（）方法实现视图更新。

 

总结：

用v-for循环渲染数组数据时，数据更新了，视图却没有更新

　　由于 JavaScript 的限制， Vue 不能检测以下变动的数组：
　　　　1. 当你利用索引直接设置一个项时，例如： vm.items[indexOfItem] = newValue
　　　　2. 当你修改数组的长度时，例如： vm.items.length = newLength

解决方法：

　为了避免第一种情况，以下两种方式将达到像 vm.items[indexOfItem] = newValue 的效果， 同时也将触发状态更新： 

(1) Vue.set

Vue.set(example1.items, indexOfItem, newValue) （数组， 所引， 值）

(2) Array.prototype.splice

example1.items.splice(indexOfItem, 1, newValue) （所引， 长度， 值）

  为了避免第二种情况，使用 splice：

example1.items.splice(newLength)