Vue2中直接改数组下标页面却没生效？原因和解决办法

文
章
目
录

• Vue2响应式机制导致的问题
• 解决办法汇总
• Vue3的改进
• 开发建议

Vue2开发不少前端开发者都遇到过这样的问题：直接通过索引修改数组元素（像arr[index] = newValue这样操作），页面却没有更新。这究竟是怎么回事呢？今天咱们就来深入探讨一下。

Vue2响应式机制导致的问题

Vue2实现响应式的方式是利用Object.defineProperty，这种机制有个局限性，它没办法检测到数组索引的直接修改，像array[index] = value这种操作，以及数组长度的变化，比如array.length = newLength ，都检测不到。这是因为Vue2为了保证性能，没有给数组的每个索引都设置getter/setter。要是对大型数组的每个索引都进行观察，那性能开销可就太大了，所以这也是一种设计上的权衡。

解决办法汇总

虽然Vue2存在这个问题，但也有不少解决办法。

• 使用Vue.set或this.$set：这是官方提供的方法，有全局和实例两种使用方式。全局方式是Vue.set(array, index, newValue)；实例方式则是在组件内部使用this.$set(array, index, newValue) ，这样就能触发视图更新了。
• 运用可触发更新的数组方法：Vue重写了一些数组方法，使用这些方法修改数组时，会自动触发视图更新。比如push()、pop()、shift()、unshift() 、splice()、sort()、reverse()等。以splice()为例，通过array.splice(index, 1, newValue)就可以修改指定位置的元素。
• 替换整个数组（不太推荐）：还可以通过创建新数组的方式来实现，像this.array = [...this.array] ，不过这种方法会重新创建数组，性能上可能会有一些损耗，所以不太推荐使用。

Vue3的改进

值得一提的是，在Vue3中，借助Proxy API解决了这个问题，直接修改数组索引也能让视图正常更新。

开发建议

在Vue2开发时，为了确保Vue能准确追踪数组变化并及时更新视图，建议优先使用$set方法修改数组元素，多运用变异方法（如splice）来操作数组，尽量避免直接修改数组长度