好的，各位观众老爷，今天咱们来聊聊 Vue 2 的 Watcher，这玩意儿可是 Vue 响应式系统的核心骨干，没有它，咱们的数据驱动视图就成了空中楼阁。今天咱们就来扒一扒 Watcher 类的 get 方法如何触发依赖收集，以及 update 方法如何将变化推送到渲染队列。保证让你听完之后，感觉自己也能写个 Vue 出来（虽然可能没那么好用）。
一、Watcher：Vue 的幕后英雄
在开始深入 get 和 update 之前，咱们先得搞清楚 Watcher 是个什么东西。可以把它想象成一个间谍，专门盯着某个数据（或者表达式）的变化。一旦数据发生了变化，这个间谍就会立即采取行动，通知相应的视图进行更新。
简单来说，Watcher 的职责就是：
- 监听数据变化： 盯着某个数据，看看它是不是变心了。
- 触发更新： 一旦数据变心了，就通知相关的人（视图）进行更新。
二、get 方法：依赖收集的幕后推手
get 方法是 Watcher 启动依赖收集的关键。它的主要任务是：
- 设置全局
target： 将当前Watcher实例设置为全局唯一的Dep.target。这个Dep.target非常重要，它是连接Watcher和Dep的桥梁。 - 执行
getter： 调用Watcher创建时传入的getter函数，这个getter函数会访问到需要监听的数据。 - 清理
target： 执行完getter后，将Dep.target设置回null，防止误收集依赖。
咱们来看一段简化版的 get 方法代码：
// 简化版的 Watcher.prototype.get
Watcher.prototype.get = function() {
pushTarget(this); // 将当前 Watcher 设置为全局 target
let value;
try {
value = this.getter.call(this.vm, this.vm); // 执行 getter，访问需要监听的数据
} catch (e) {
// 处理错误
} finally {
popTarget(); // 清理 target
}
return value;
};
// 简化版的 pushTarget 和 popTarget
let targetStack = [];
function pushTarget (_target) {
targetStack.push(_target);
Dep.target = _target;
}
function popTarget () {
targetStack.pop();
Dep.target = targetStack[targetStack.length - 1];
}依赖收集流程：
pushTarget(this)：将当前的Watcher实例this设置为Dep.target。this.getter.call(this.vm, this.vm)：执行getter函数。这个getter函数通常会访问到 Vue 组件的data中的数据。- 当
getter函数访问data中的数据时，会触发data中数据的getter。 data中数据的getter会判断Dep.target是否存在，如果存在（也就是当前有Watcher正在运行），则将当前的Watcher添加到该数据对应的Dep实例中。popTarget()：将Dep.target恢复到之前的状态，防止后续的依赖收集出现错误。
举个栗子：
假设咱们有以下 Vue 组件：
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello Vue!'
};
}
};
</script>当 Vue 初始化这个组件时，会创建一个 Watcher 来监听 message 的变化。这个 Watcher 的 getter 函数会访问 this.message。
Watcher的get方法被调用，Dep.target被设置为这个Watcher实例。getter函数执行，访问this.message。message的getter被触发。message的getter发现Dep.target存在，于是将当前的Watcher添加到message对应的Dep实例中。Watcher的get方法执行完毕，Dep.target被设置为null。
这样，Watcher 就和 message 建立了联系。当 message 发生变化时，message 对应的 Dep 实例会通知所有依赖它的 Watcher 进行更新。
表格总结 get 方法的关键步骤：
| 步骤 | 描述 |
|---|---|
| 1 | pushTarget(this): 将当前 Watcher 实例设置为全局唯一的 Dep.target。 |
| 2 | 执行 getter 函数: 这个函数会访问到需要监听的数据，触发数据的 getter。 |
| 3 | 数据 getter 的依赖收集: 数据 getter 检查 Dep.target 是否存在，如果存在，则将当前的 Watcher 添加到该数据对应的 Dep 实例中。 |
| 4 | popTarget(): 将 Dep.target 设置回 null，防止误收集依赖。 |
三、update 方法：变化推送的发动机
当 Watcher 监听的数据发生变化时，对应的 Dep 实例会调用 Watcher 的 update 方法。update 方法的主要任务是：
- 异步更新： 将
Watcher添加到更新队列中，等待异步执行。 - 避免重复更新： 确保同一个
Watcher在同一轮更新中只会被执行一次。
咱们来看一段简化版的 update 方法代码：
// 简化版的 Watcher.prototype.update
Watcher.prototype.update = function() {
if (this.lazy) {
// computed watcher 的情况
this.dirty = true;
} else if (this.sync) {
// 同步 watcher 的情况
this.run();
} else {
// 异步 watcher 的情况
queueWatcher(this);
}
};update 方法根据 Watcher 的类型（lazy、sync）采取不同的更新策略：
lazyWatcher (computed properties): 将this.dirty设置为true，表示计算属性需要重新计算。syncWatcher: 直接调用this.run()方法进行同步更新。这通常用于一些需要立即更新的场景。- 异步 Watcher (默认情况): 调用
queueWatcher(this)将Watcher添加到更新队列中。
异步更新队列：
Vue 使用一个异步更新队列来批量处理 Watcher 的更新。这样做的好处是：
- 性能优化： 避免频繁的 DOM 操作，提高渲染性能。
- 去重： 确保同一个
Watcher在同一轮更新中只会被执行一次。
queueWatcher 函数会将 Watcher 添加到 queue 数组中，并使用 nextTick 函数来触发更新队列的执行。
// 简化版的 queueWatcher 函数
let queue = [];
let has = {};
let flushing = false;
let waiting = false;
function queueWatcher (watcher) {
const id = watcher.id;
if (has[id] == null) {
has[id] = true;
if (!flushing) {
queue.push(watcher);
} else {
// 如果正在刷新队列，则根据 watcher 的 id 插入到合适的位置，保证渲染顺序
let i = queue.length - 1;
while (i > -1 && queue[i].id > watcher.id) {
i--;
}
queue.splice(i + 1, 0, watcher);
}
if (!waiting) {
waiting = true;
nextTick(flushSchedulerQueue);
}
}
}
// 简化版的 nextTick 函数
import { nextTick } from 'core/util/next-tick'更新队列执行流程：
queueWatcher(watcher)：将Watcher添加到更新队列queue中，并进行去重。nextTick(flushSchedulerQueue)：使用nextTick函数将flushSchedulerQueue函数推入微任务队列中，等待执行。flushSchedulerQueue()：从更新队列queue中取出Watcher，并调用Watcher的run方法进行更新。
run 方法：真正的更新执行者
run 方法是 Watcher 执行更新的最终环节。它会：
- 获取新值： 再次调用
getter函数，获取最新的数据值。 - 比较新旧值： 比较新值和旧值是否发生变化。
- 执行回调函数： 如果新值和旧值不相等，则调用
Watcher的回调函数，进行视图更新。
// 简化版的 Watcher.prototype.run
Watcher.prototype.run = function() {
if (this.active) {
const value = this.get(); // 获取新值
if (value !== this.value ||
// 对象或者数组的深层变化也会触发更新
isObject(value) ||
this.deep) {
// 保存旧值
const oldValue = this.value;
this.value = value;
// 调用回调函数，更新视图
this.cb.call(this.vm, value, oldValue);
}
}
};表格总结 update 方法的关键步骤：
| 步骤 | 描述 |
|---|---|
| 1 | 根据 Watcher 的类型（lazy、sync）选择不同的更新策略。 |
| 2 | 对于异步 Watcher，使用 queueWatcher(this) 将 Watcher 添加到更新队列中。 |
| 3 | nextTick(flushSchedulerQueue) 将 flushSchedulerQueue 函数推入微任务队列中，等待执行。 |
| 4 | flushSchedulerQueue() 从更新队列中取出 Watcher，并调用 Watcher 的 run 方法进行更新。 |
| 5 | run 方法获取新值，比较新旧值，如果发生变化，则调用 Watcher 的回调函数，进行视图更新。 |
四、Watcher 的类型
Vue 中存在多种类型的 Watcher，它们承担着不同的职责：
- 渲染
Watcher(Render Watcher): 负责更新组件的视图。这是最常见的Watcher类型。 - 计算属性
Watcher(Computed Watcher): 负责计算和缓存计算属性的值。 - 用户
Watcher(User Watcher): 负责监听用户自定义的watch选项。
不同类型的 Watcher 在更新策略上可能会有所不同。例如，计算属性 Watcher 通常采用惰性求值的方式，只有在需要时才会重新计算。
五、总结
Watcher 是 Vue 响应式系统的核心组成部分。它通过 get 方法触发依赖收集，将 Watcher 和需要监听的数据建立联系。当数据发生变化时，Watcher 的 update 方法会被调用，将更新任务添加到异步更新队列中，最终通过 run 方法执行更新，驱动视图的更新。
希望通过今天的讲解，大家对 Vue 2 中 Watcher 的 get 和 update 方法有了更深入的了解。记住，理解了 Watcher，你就理解了 Vue 响应式系统的精髓。以后面试再被问到相关问题，就不用慌了，直接把今天讲的这些搬出来，保证让面试官眼前一亮！
今天的讲座就到这里，感谢各位观众老爷的捧场！下次有机会再和大家一起探讨 Vue 的其他奥秘。再见！