Vue响应式原理

何谓响应式？

响应式编程是一种编程范式，它允许我们声明式地定义数据之间的关系，并自动更新相关的数据。在 Vue.js 中，响应式系统使得当数据发生变化时，视图会自动更新，而无需手动操作 DOM。

什么是 MVVM？

MVVM（Model-View-ViewModel）是一种软件架构模式，它将应用程序分为三个主要部分：

  • Model：代表应用程序的数据和业务逻辑。
  • View：代表用户界面（UI）。
  • ViewModel：作为 View 和 Model 之间的桥梁，负责将 Model 的数据转换为 View 可以显示的形式，并处理用户的输入。

在 Vue.js 中，ViewModel 是由 Vue 实例提供的，它通过响应式系统将 Model 和 View 绑定在一起。

Vue2 响应式原理的核心逻辑

Vue2 的响应式原理主要依赖于 JavaScript 的 Object.defineProperty 方法。Vue2 通过递归地将数据对象的属性转换为 getter 和 setter，从而实现数据的响应式。

核心逻辑实现

  1. 数据劫持：Vue2 使用 Object.defineProperty 对数据对象的每个属性进行劫持，将其转换为 getter 和 setter。当访问属性时，getter 会被调用；当修改属性时，setter 会被调用。

  2. 依赖收集：在 getter 中，Vue2 会收集当前属性的依赖（即 Watcher 实例）。这些依赖代表了哪些视图或计算属性依赖于当前数据。

  3. 派发更新：在 setter 中，当数据发生变化时，Vue2 会通知所有依赖进行更新，从而触发视图的重新渲染。

代码示例

以下是一个简化的 Vue2 响应式系统实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
class Dep {
  constructor() {
    this.subscribers = [];
  }

  depend() {
    if (Dep.target) {
      this.subscribers.push(Dep.target);
    }
  }

  notify() {
    this.subscribers.forEach(sub => sub());
  }
}

Dep.target = null;

function observe(data) {
  if (!data || typeof data !== 'object') {
    return;
  }

  Object.keys(data).forEach(key => {
    let value = data[key];
    const dep = new Dep();

    observe(value);

    Object.defineProperty(data, key, {
      enumerable: true,
      configurable: true,
      get() {
        dep.depend();
        return value;
      },
      set(newVal) {
        if (newVal === value) {
          return;
        }
        value = newVal;
        observe(newVal);
        dep.notify();
      }
    });
  });
}

function watcher(fn) {
  Dep.target = fn;
  fn();
  Dep.target = null;
}

const data = { message: 'Hello, Vue!' };
observe(data);

watcher(() => {
  console.log('Message changed:', data.message);
});

data.message = 'Hello, World!'; // 输出: Message changed: Hello, World!

结论

Vue2 的响应式原理通过 Object.defineProperty 实现了数据的劫持、依赖收集和派发更新，从而实现了数据的自动更新和视图的自动渲染。MVVM 模式则通过 ViewModel 将 Model 和 View 解耦，使得开发者可以更加专注于数据和业务逻辑，而无需关心复杂的 DOM 操作。理解这些核心概念和实现方式，对于深入掌握 Vue.js 及其生态系统至关重要。