Vue.js 揭秘：监听器与数据变化是如何协同更新视图的？

前端

2023-08-24 20:10:22

Vue.js 中监听器和 Dep 实例：守护数据与视图和谐共舞

在 Vue.js 的王国里，数据与视图是一对形影不离的伙伴，犹如国王和他的臣民。当数据发生变化时，视图也会随之更新，让用户能够及时了解最新信息。这种神奇的更新机制，离不开监听器和 Dep 实例的默默付出。

监听器：Vue.js 的数据哨兵

监听器就像 Vue.js 的哨兵，时刻监视着数据的变化。一旦发现数据发生改变，监听器就会立即通知视图，让视图做出相应的调整。

监听器通过创建一个 Watcher 实例来实现。Watcher 实例包含了数据对应的 key 和更新函数。当数据发生变化时，Watcher 实例会自动触发更新函数，将最新的数据值传递给视图。

Dep 实例：数据的管家

Dep 实例就像数据的管家，负责管理数据对应的所有监听器。当数据发生变化时，Dep 实例会通知所有监听器，让它们知道数据已经更新了。

Dep 实例通过维护一个监听器数组来实现。当一个监听器需要监听数据时，它会向 Dep 实例注册自己。当数据发生变化时，Dep 实例会遍历监听器数组，逐个通知监听器。

监听器与 Dep 实例的协作

监听器和 Dep 实例是亲密无间的搭档，它们紧密合作，共同维护着数据与视图的同步。当数据发生变化时，Dep 实例会通知监听器，监听器再通知视图，视图再进行更新。

例子：实现 Vue.js 中的监听器和 Dep 实例

// 监听器
class Watcher {
  constructor(vm, key, updateFn) {
    this.$vm = vm;
    this.$key = key;
    this.$updateFn = updateFn;

    // 调用更新函数，获取最新值传递进去
    this.$updateFn.call(this.$vm, this.$vm[this.$key]);
  }
}

// Dep实例
class Dep {
  constructor() {
    this.watchers = [];
  }

  addWatcher(watcher) {
    this.watchers.push(watcher);
  }

  notify() {
    this.watchers.forEach((watcher) => {
      watcher.$updateFn.call(watcher.$vm, watcher.$vm[watcher.$key]);
    });
  }
}

// 创建一个 Vue 实例
const vm = new Vue({
  data: {
    message: 'Hello, Vue.js!'
  }
});

// 创建一个监听器
const watcher = new Watcher(vm, 'message', (newVal, oldVal) => {
  console.log(`Message changed from ${oldVal} to ${newVal}`);
});

// 改变数据
vm.message = 'New message';