Vue的修改数据页面不重新渲染

╰半橙微兮° 2021-09-18 02:22 496阅读 0赞

## 需求： ##

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

## 问题： ##

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

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

[![％E5％9B％BE％E7％89％87][E5_9B_BE_E7_89_87]][E5_9B_BE_E7_89_87]

**[图片.png376x598 80.2 KB][E5_9B_BE_E7_89_87]**

（2）冒泡排序修改数组  
![％E5％9B％BE％E7％89％87][E5_9B_BE_E7_89_87 1]  
（3）打印出改变之后的数组  
![％E5％9B％BE％E7％89％87][E5_9B_BE_E7_89_87 2]  
（4）页面毫无变化

[![％E5％9B％BE％E7％89％87][E5_9B_BE_E7_89_87 3]][E5_9B_BE_E7_89_87 3]

**[图片.jpg379x598 86.4 KB][E5_9B_BE_E7_89_87 3]**

## 数组的数据格式如下： ##

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

## 解决方案: ##

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

VUE文档中的原话：  
![％E5％9B％BE％E7％89％87][E5_9B_BE_E7_89_87 4]

VUE文档中的解决方案：  
![％E5％9B％BE％E7％89％87][E5_9B_BE_E7_89_87 5]

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

下面讲解vue.set()

[E5_9B_BE_E7_89_87]: https://forum.vuejs.org/uploads/default/original/3X/a/7/a7e4efda9bb28c0c0a020ffa82e003942d2213a4.png
[E5_9B_BE_E7_89_87 1]: https://forum.vuejs.org/uploads/default/original/3X/5/6/56496898ba08d6a33d82cdfb2ac64d55951bccf4.png
[E5_9B_BE_E7_89_87 2]: https://forum.vuejs.org/uploads/default/original/3X/1/6/160f0fc84730660cc7e596c9faef69409e920c8c.png
[E5_9B_BE_E7_89_87 3]: https://forum.vuejs.org/uploads/default/original/3X/2/8/2830420a4924053f736fbd084bad62f5db7e1984.jpeg
[E5_9B_BE_E7_89_87 4]: https://forum.vuejs.org/uploads/default/original/3X/f/b/fb27a2c06129183b2514fdf673c25b67a5a4ab5e.png
[E5_9B_BE_E7_89_87 5]: https://forum.vuejs.org/uploads/default/original/3X/f/9/f9822a29e268163639b112010e496ddf82931546.png