如何理解Vue的响应式数据？从源码解析开始

前端

2023-12-17 16:29:35

从数据绑定说起

在前端开发中，数据绑定是一种非常常用的技术，它可以将数据与视图进行关联，从而实现数据的自动更新。Vue的响应式数据正是基于数据绑定来实现的。

Vue的响应式数据是如何实现的？

Vue的响应式数据是通过依赖收集 和发布订阅 两种机制来实现的。

依赖收集

当一个组件被创建时，Vue会为其创建一个Watcher实例。Watcher实例会收集该组件中所有被观察的数据，并将这些数据添加到自己的依赖列表中。当这些数据发生变化时，Watcher实例就会被通知，并执行相应的更新操作。

发布订阅

Vue中，数据变化时会触发一个事件，称为“变异事件”。当变异事件发生时，Vue会通知所有订阅了该事件的Watcher实例。这些Watcher实例就会执行相应的更新操作，从而使视图中的数据保持最新状态。

源码解析

下面，我们就从源码的角度来看一下Vue是如何实现响应式数据的。

// 在$mount()的时候，会创建Watcher实例的过程
var Watcher = function (vm, expOrFn, cb, options) {
  this.vm = vm;
  if (typeof expOrFn === 'function') {
    this.getter = expOrFn;
  } else {
    this.getter = parsePath(expOrFn);
  }
  this.cb = cb;
  this.options = options;
  this.active = true;
  this.value = this.get();
};

// render的时候就会读取到响应数据，从而触发get
Watcher.prototype.get = function () {
  pushTarget(this); // 将当前Watcher实例设置为Dep.target
  var value = this.getter.call(this.vm, this.vm);
  popTarget(); // 将当前Watcher实例从Dep.target中移除
  this.cleanupDeps(); // 清除依赖
  return value;
};

// 只有被观察的数据才配置了get，get执行过程中会创建一个Dep实例
var Dep = function () {
  this.subs = [];
};

Dep.prototype.addSub = function (sub) {
  this.subs.push(sub);
};

Dep.prototype.notify = function () {
  for (var i = 0, l = this.subs.length; i < l; i++) {
    this.subs[i].update();
  }
};