需求：

通过一个数组渲染出商品列表，现在我通过价格对数组内的商品进行排序，希望改变数组后重新渲染商品列表。

问题：

数组改变之后并没有重新渲染。

测试流程：
（1）页面渲染出乱序的商品列表

图片.png376x598 80.2 KB

（2）冒泡排序修改数组

（3）打印出改变之后的数组

（4）页面毫无变化

图片.jpg379x598 86.4 KB

 

数组的数据格式如下：

[{'key1'：'value1'，'key2'：'value2'，'price'：num}，.......]

解决方案:

通过修改数组下标的方式是不会触发改动的，你要手动触发.

VUE文档中的原话：

VUE文档中的解决方案：

手动触发视图，这$ forceUpdate（）。

下面讲解vue.set()