Vue 进阶面试题, Vue 的 data 中如果有数组,如何检测数组的变化?

Step 1

Q:: 如何在 Vue 中检测数组的变化？

A:: 在 Vue 2.x 中，由于 JavaScript 的限制，Vue 不能直接侦听数组项的变化，因此 Vue 对数组的变化检测是通过包裹原生数组方法进行的，比如 push、pop、shift、unshift、splice、sort、reverse 等操作。这些方法会触发视图的更新。但是，直接修改数组的索引或长度是不会被侦听到的，因此可以使用 Vue.set 或者通过 splice 方法来确保数组变化是可侦听的。在 Vue 3 中，通过 Proxy 实现了对数组及其内部元素变化的全面侦听，提升了数组变化侦听的准确性和易用性。

Step 2

Q:: 为什么 Vue 2.x 不能直接侦听数组的变化？

A:: 这是由于 JavaScript 本身的限制，在 ES5 中，无法劫持数组索引和长度的直接修改。因此，Vue 2.x 采取了包裹数组变异方法的方式来侦听数组变化。这种方法虽然有效，但有一些边界情况可能会导致数据不更新。因此，开发者需要小心处理对数组的直接索引修改。Vue 3 通过 Proxy 彻底解决了这个问题。

Step 3

Q:: Vue 中的数组响应式有什么局限性？

A:: 在 Vue 2.x 中，数组的响应式具有以下局限性：无法侦听通过索引修改数组元素的变化，无法侦听直接修改数组长度的变化，必须使用 Vue 提供的变异方法（如 push, pop, splice 等）来触发更新。这些局限性在某些复杂场景下可能导致意外的 UI 同步问题，因此需要通过 Vue.set 或手动触发更新来确保数组响应式工作正常。