Vue 进阶面试题, Vue 是如何收集依赖的?

Step 1

Q:: Vue 是如何收集依赖的？

A:: Vue 通过在组件渲染过程中读取响应式数据来收集依赖。当一个 Vue 组件被渲染时，所有被访问到的响应式属性都会被“订阅”，即依赖被收集。这是通过 Object.defineProperty 或者 Proxy 实现的。当一个响应式数据被访问时，Vue 的依赖追踪机制会将当前的渲染函数（watcher）添加到这个属性的依赖列表中。这样，当这个属性变化时，Vue 会通知所有订阅了该属性的渲染函数进行重新渲染。

Step 2

Q:: Vue 如何追踪依赖的变化？

A:: Vue 通过 setter 方法来追踪依赖的变化。当依赖的数据发生变化时，Vue 的 setter 方法会被触发，通知所有依赖了这个数据的 watcher 执行更新操作，从而使得相关的视图也随之更新。

Step 3

Q:: Vue 响应式系统的原理是什么？

A:: Vue 响应式系统的原理基于 Object.defineProperty (在 Vue 2) 或 Proxy (在 Vue 3) 这两者。它通过这些底层 API 拦截对数据的访问和修改操作，从而实现了对数据变化的追踪。Vue 使用一个 Dep 类来收集依赖，并使用 Watcher 类来响应数据的变化并重新渲染。