Vue 的 MVVM 模式响应式原理：深入剖析 Dep、Watcher、Observer

2023-11-30 17:04:36

Vue.js 是一个流行的 JavaScript 框架，它以其优雅的 MVVM（Model-View-ViewModel）模式而著称。MVVM 模式是一种将数据模型、视图和视图模型分离开来的架构模式，它允许开发人员轻松地创建动态和交互式 web 应用程序。在 Vue 中，响应式系统是 MVVM 模式的核心，它允许数据模型中的变化自动反映到视图中，而无需手动更新。

响应式系统概述

Vue 的响应式系统基于三个关键概念：Dep（依赖）、Watcher（观察者）和 Observer（观察目标）。Dep 是一个用于收集依赖的类，它存储了所有依赖于某个数据的 Watcher。当数据发生变化时，Dep 会通知所有依赖它的 Watcher，以便 Watcher 更新视图。Watcher 是一个用于观察数据的类，它包含了一个回调函数，当数据发生变化时，这个回调函数会被调用。Observer 是一个用于观察数据的类，它将 Dep 和 Watcher 联系起来，以便 Dep 可以通知 Watcher 数据的变化。

Dep 的工作原理

Dep 的主要职责是收集依赖。当一个 Watcher 被创建时，它会调用 Dep.depend() 方法将自己添加到 Dep 的依赖列表中。当数据发生变化时，Dep 会调用 Dep.notify() 方法通知所有依赖它的 Watcher。Watcher 收到通知后，会调用其回调函数更新视图。

Watcher 的工作原理

Watcher 是一个用于观察数据的类，它包含了一个回调函数，当数据发生变化时，这个回调函数会被调用。Watcher 可以通过调用 Dep.depend() 方法将自己添加到 Dep 的依赖列表中。当数据发生变化时，Dep 会调用 Dep.notify() 方法通知所有依赖它的 Watcher。Watcher 收到通知后，会调用其回调函数更新视图。

Observer 的工作原理

Observer 是一个用于观察数据的类，它将 Dep 和 Watcher 联系起来，以便 Dep 可以通知 Watcher 数据的变化。Observer 在数据对象上设置 getter 和 setter 方法，当数据发生变化时，getter 和 setter 方法会被调用。getter 方法会收集依赖，setter 方法会通知 Dep 数据的变化。