Vue 进阶面试题, Vue 能监听到数组变化的方法有哪些?为什么这些方法能监听到?
Vue 进阶面试题, Vue 能监听到数组变化的方法有哪些?为什么这些方法能监听到?
QA
Step 1
Q:: Vue 能监听到数组变化的方法有哪些？为什么这些方法能监听到？
A:: Vue 通过对数组方法的重写和响应式系统来监听数组的变化。Vue 能够监听数组变化的方法包括：push(), pop(), shift(), unshift(), splice(), sort(), reverse()。这些方法通过修改数组的内容而触发 Vue 的响应式更新。Vue 内部是通过重写这些方法，使得它们在执行时不仅完成原始操作，还会通知 Vue 进行视图的更新。Vue 对于这些方法的监听之所以有效，是因为 Vue 使用了 Object.defineProperty 或 Proxy（在 Vue 3 中）来劫持数组的操作，并且在操作完成后进行依赖收集和派发更新。
Step 2
Q:: Vue 不能监听到哪些数组的变化？如何解决？
A:: Vue 不能监听通过索引直接修改数组元素（如 arr[0] = newValue）或修改数组长度（如 arr.length = newLength）的变化。解决方法是使用 Vue 提供的 Vue.set 方法（在 Vue 3 中是 reactive API）来设置新的值，这样 Vue 才能监听到变化并更新视图。
Step 3
Q:: Vue 3 是如何改进数组监听机制的？
A:: 在 Vue 3 中，通过 Proxy 对象来代理整个对象和数组，取代了 Vue 2 中的 Object.defineProperty，从而解决了 Vue 2 中无法监听数组索引和长度变化的问题。通过 Proxy，Vue 3 可以在数组的所有操作（包括索引赋值和 length 改变）中劫持并触发更新，使得数据变动的监听更加全面和高效。
Step 4
Q:: Vue 中的依赖收集是什么？它是如何工作的？
A:: 依赖收集是 Vue 响应式系统的核心机制之一。当一个响应式属性在模板或计算属性中被访问时，Vue 会将当前的渲染上下文或计算属性的依赖记录下来，并在该属性发生变化时重新计算或重新渲染相关的部分。Vue 使用了一个称为 'Dep' 的类来管理依赖，并通过 getter 和 setter 在访问和修改属性时进行依赖收集和通知。
Step 5
Q:: Vue 是如何追踪对象属性的变化的？
A:: Vue 通过使用 Object.defineProperty (在 Vue 3 中使用 Proxy) 来追踪对象属性的变化。当一个对象属性被访问时，Vue 会使用 getter 方法进行依赖收集；当属性值发生变化时，Vue 会通过 setter 方法触发依赖通知，进而更新视图。