【VUE】Vue3通过数组下标更改数组视图为什么会更新？

在 Vue 3 中，使用 Proxy 来实现了对数组的响应式监听，相比于 Vue 2 使用的 Object.defineProperty()，Proxy 更加高效和灵活。

因此，在 Vue 3 中，通过数组下标直接更改数组中某一项的值，也能够被 Vue 正确监听到并触发视图更新。

Vue 3 中，数组的修改操作依然分为两类：变异方法和非变异方法。其中，非变异方法包括以下几种：

• filter
• map
• reduce
• some
• every
• slice 等

这些方法返回一个新数组，且不会修改原数组本身。而变异方法则会修改原数组本身，例如：

• push
• pop
• shift
• unshift
• splice 等

对于非变异方法，Vue 3 直接使用了 JavaScript 原生的数组方法，并且将其结果转化为响应式的数组，从而能够正确地进行界面的更新。

对于变异方法，Vue 3 则是使用 Proxy 对数组进行了处理，并且将变异方法进行了重写，从而实现了针对性的数组数据更新，避免了 Vue 2 中需要手动调用特殊方法来更新数组或者借助于 Object.defineProperty() 的方式实现。

因此，在 Vue 3 中，即使是通过数组下标直接修改数组中的某一项，也能够正常触发视图更新，从而实现了更好的响应式体验。