Vue.js 双向绑定的源码解析

前端

2023-10-01 12:12:34

在 Vue.js 中，双向绑定是一项关键特性，它允许数据模型与 UI 元素保持同步。在本文中，我们将深入探讨 Vue.js 双向绑定的源码，了解它的工作原理以及如何实现它。

Vue.js 双向绑定的概述

Vue.js 的双向绑定基于数据响应和依赖收集的机制。当数据模型发生变化时，框架会检测到这些变化并触发 UI 更新。相反，当用户与 UI 元素进行交互时，例如输入文本或点击按钮，更新也会自动反映在数据模型中。

数据响应

Vue.js 使用代理模式对数据模型进行响应。当一个属性被访问或修改时，实际上是在访问或修改代理对象的 getter 或 setter 方法。这些 getter 和 setter 方法负责触发依赖收集和更新。

依赖收集

在 getter 方法中，Vue.js 会收集当前执行的 watcher。这些 watcher 代表需要在数据模型发生变化时更新的 UI 元素。

发布订阅

当数据模型发生变化时，Vue.js 会发布一个事件，通知所有收集到的 watcher。watcher 然后负责更新关联的 UI 元素。

源码解析

让我们深入研究 Vue.js 双向绑定的源码：

class Watcher {
  constructor(target, key, cb) {
    Dep.targetWatcher = this;
    this.cb = cb;
    this.value = target[key];
    this.deps = new Set();
  }
}

在这个类中：

target 是要观察的对象。
key 是要观察的属性。
cb 是当属性值发生变化时要调用的回调函数。

class Dep {
  constructor() {
    this.subs = new Set();
  }

  addSub(watcher) {
    this.subs.add(watcher);
  }

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