Vue 进阶面试题, Vue 2 修改了数组的哪些方法?为什么?
Vue 进阶面试题, Vue 2 修改了数组的哪些方法?为什么?
QA
Step 1
Q:: Vue 2 修改了数组的哪些方法？为什么？
A:: 在Vue 2中，以下数组的方法被修改了：push(), pop(), shift(), unshift(), splice(), sort(), reverse()。这些方法之所以被修改，是因为Vue 2 使用的是基于 Object.defineProperty 的响应式系统，数组的这些方法在原生 JavaScript 中不会触发对象的 setter，从而导致 Vue 无法监听到数组的变化。为了确保 Vue 可以检测到数组的变化，Vue 2 对这些方法进行了拦截处理，使得它们可以在执行后触发视图更新。
Step 2
Q:: Vue 2 是如何实现数组响应式的？
A:: Vue 2 使用 Object.defineProperty 拦截对象的属性读取和写入操作来实现响应式，但由于 Object.defineProperty 无法拦截数组的索引变化，因此 Vue 2 需要对数组的方法进行重写。当数组的方法被调用时，Vue 会对数组的变化做出响应，并通知视图进行更新。通过这种方式，Vue 实现了对数组的响应式处理。
Step 3
Q:: Vue 2 的响应式系统有哪些局限性？
A:: Vue 2 的响应式系统主要依赖于 Object.defineProperty，这带来了几个局限性：1) 无法检测数组的索引变化；2) 无法检测对象属性的添加或删除；3) 无法兼容 IE8 及更早的浏览器。这些局限性在 Vue 3 中得到了改善，Vue 3 采用了 Proxy 进行更全面的响应式处理。
Step 4
Q:: 如何解决 Vue 2 无法检测数组索引变化的问题？
A:: 在 Vue 2 中，如果需要检测数组的索引变化，可以通过使用 Vue.set() 方法来确保数组索引的变化可以被 Vue 检测到。Vue.set() 是 Vue 提供的一个方法，用于向响应式对象添加新的属性或改变数组的元素，它会确保新添加的属性是响应式的并且会触发视图更新。