有关vue中v-for绑定的列表或数组无法触发视图更新的问题

结论

有以下两种情况，无法触发v-for的视图更新
①通过索引直接修改数组元素，例如vm.item[index]＝…；
②无法直接修改“修改长度”的长度，例如vm.item.length＝0

解决方法

第一种情况解决方法是vue.js提供了$set方法。

原因

在Vue中，直接通过索引修改数组元素（如 vm.item[index] =… ）不能触发视图更新，主要是因为Vue无法检测到这种变化方式。

vue对数组的原生方法进行了封装，Vue对一些能改变数组本身的方法（如 push 、 pop 、 shift 、 unshift 、 splice 、 sort 、 reverse ）进行了包裹，当调用这些方法时会触发视图更新。

但是直接通过索引修改数组元素，没有触发这些被包裹的方法，Vue内部的数据劫持机制就无法感知到数据的变化，也就不会自动更新视图。

参考

vue.js前端开发快速入门与专业应用，陈陆扬
豆包