Vue 进阶面试题, Vue 中封装的数组方法有哪些?它们如何实现视图更新?

Step 1

Q:: Vue 中封装的数组方法有哪些？

A:: Vue 中封装的数组方法主要有以下几个：push、pop、shift、unshift、splice、sort、reverse。这些方法都是对原生 JavaScript 数组方法的封装，以实现数据变动时的响应式更新。Vue 会监测这些数组方法的调用，并在数组发生变化时自动触发视图的更新。

Step 2

Q:: Vue 如何实现数组方法的视图更新？

A:: Vue 通过劫持数组原型链的方式，实现对数组方法的拦截。Vue 会为这些方法添加一个观察者(Observer)，当这些方法被调用时，Vue 会在内部触发一个 dep.notify() 通知机制，从而触发相应的 Watcher，最终更新视图。Vue 内部通过 Object.defineProperty 或 Proxy (在 Vue 3 中)来实现对数据的拦截和视图更新。

Step 3

Q:: 为什么 Vue 要封装数组方法？

A:: Vue 需要封装数组方法来确保数组在发生变化时，视图能够自动更新。原生的数组方法不会触发 Vue 的响应式机制，如果直接操作数组，视图将无法自动更新，这与 Vue 的设计理念相违背。通过封装这些方法，Vue 能够确保数组变化时，数据驱动的视图更新逻辑能够顺利执行。

Step 4

Q:: Vue 封装的数组方法与原生方法有什么区别？

A:: Vue 封装的数组方法与原生方法在使用上基本一致，但其内部实现上会多出响应式系统的逻辑。Vue 封装的方法会在操作数组时通知视图更新，这也是与原生方法的主要区别。具体来说，当调用 Vue 封装的方法时，Vue 内部会对数据变化进行检测，并通知相关的依赖进行更新，从而触发 DOM 的重新渲染。