各位听众，早上好！今天咱们来聊聊 Vue 2 响应式系统的两位核心人物：Observer 和 Dep。别被这两个名字吓到，他们其实就是Vue响应式系统的骨架，理解了他们，你就能看透Vue数据驱动视图的秘密。
响应式系统：Vue 的超能力
首先，我们得明白什么是响应式系统。简单来说，就是当你的数据发生变化时，视图（也就是用户界面）能自动更新，不用你手动去刷新或者操作 DOM。 这就像你的工资卡和你的购物欲望，工资涨了，购物欲望自动膨胀，这才是真正的"响应式"。
Vue 就是靠它的响应式系统实现这种“自动更新”的魔法。而 Observer 和 Dep 正是这个魔法的核心。
主角一：Observer，数据侦察兵
Observer 类的职责很简单也很关键：把一个普通 JavaScript 对象变成“可观察”的。 也就是说，它会遍历对象的每一个属性，然后使用 Object.defineProperty 将它们转换成 getter/setter。 这样，每次你访问或修改这个属性时，getter/setter 就会被触发。
用代码来展示一下：
function Observer(value) {
this.value = value;
this.walk(value);
}
Observer.prototype.walk = function (obj) {
const keys = Object.keys(obj);
for (let i = 0; i < keys.length; i++) {
defineReactive(obj, keys[i], obj[keys[i]]);
}
};
function defineReactive(obj, key, val) {
// 递归观察，处理嵌套对象
observe(val);
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function reactiveGetter() {
// 收集依赖
return val;
},
set: function reactiveSetter(newVal) {
if (newVal === val) return;
// 触发更新
val = newVal;
}
});
}
function observe(value) {
if (typeof value !== 'object' || value === null) {
return; // 不是对象或null，直接返回
}
return new Observer(value);
}
// 例子
const data = {
name: '小明',
age: 18,
address: {
city: '北京'
}
};
observe(data);
console.log(data.name); // 触发 getter
data.name = '小红'; // 触发 setter在这个例子中，observe(data) 会把 data 对象变成“可观察”的。 每次你访问 data.name，reactiveGetter 就会被触发，每次你修改 data.name，reactiveSetter 就会被触发。
重点：递归观察
注意 defineReactive 函数中的 observe(val)。 这意味着如果你的对象属性的值也是一个对象，那么它也会被递归地观察，直到所有的嵌套对象都被转换成“可观察”的。 这保证了无论多深层的数据变化，都能被 Vue 捕捉到。
主角二：Dep，依赖收集器
Dep 类的职责是管理所有依赖于某个数据的 Watcher 对象。 简单来说，它就是一个“依赖列表”，记录着哪些 Watcher 需要在数据变化时被通知。
可以把Dep想象成一个发布订阅模式的“主题”，当数据发生变化时，Dep 会通知所有订阅者（Watcher）。
class Dep {
constructor() {
this.subs = []; // 存储订阅者 (Watcher)
}
addSub(sub) {
this.subs.push(sub);
}
removeSub(sub) {
remove(this.subs, sub);
}
depend() {
if (Dep.target) { // Dep.target 指向当前的 Watcher
Dep.target.addDep(this); // 让 Watcher 收集 Dep
}
}
notify() {
// 遍历所有的订阅者，并通知它们更新
const subs = this.subs.slice();
for (let i = 0, l = subs.length; i < l; i++) {
subs[i].update(); // 调用 Watcher 的 update 方法
}
}
}
// 移除数组中的元素
function remove(arr, item) {
if (arr.length) {
const index = arr.indexOf(item);
if (index > -1) {
return arr.splice(index, 1);
}
}
}
// 全局的 Watcher 目标
Dep.target = null;
// 临时保存 Dep.target 的状态，方便嵌套依赖收集
const targetStack = [];
function pushTarget(target) {
targetStack.push(target);
Dep.target = target;
}
function popTarget() {
targetStack.pop();
Dep.target = targetStack[targetStack.length - 1];
}在这个例子中，Dep 维护了一个 subs 数组，用于存储所有的 Watcher 对象。 depend 方法用于收集依赖，notify 方法用于通知所有订阅者更新。
重点：Dep.target
Dep.target 是一个全局变量，指向当前的 Watcher 对象。 在依赖收集的过程中，Vue 会把当前的 Watcher 赋值给 Dep.target，这样 Dep 就能知道是谁在依赖这个数据了。 依赖收集完成后，再把 Dep.target 设置为 null。
Watcher：视图更新的执行者
虽然我们还没详细讲 Watcher，但有必要先提一下它，因为它在 Observer 和 Dep 的协作中起着关键作用。
Watcher 的职责是监听数据的变化，并在数据变化时执行更新函数。 通常，一个 Watcher 对应着一个组件或者一个表达式。
Observer、Dep 和 Watcher 如何协同工作？
现在，我们把 Observer、Dep 和 Watcher 放在一起，看看它们是如何协同工作的：
- 创建
Observer: 当 Vue 实例化一个组件时，它会递归地遍历组件的数据对象，并使用Observer将它们转换成“可观察”的。 - 创建
Dep: 在defineReactive函数中，会为每个属性创建一个Dep对象。 - 创建
Watcher: 当 Vue 编译模板时，它会为每个需要动态更新的 DOM 元素创建一个Watcher对象。 - 依赖收集: 在
Watcher的初始化过程中，会触发数据的getter。getter会调用Dep.depend()方法，将当前的Watcher对象添加到Dep的subs数组中。 - 数据变化: 当数据发生变化时，会触发数据的
setter。setter会调用Dep.notify()方法，遍历Dep的subs数组，并调用每个Watcher的update()方法。 - 视图更新:
Watcher的update()方法会执行更新函数，从而更新视图。
可以用一个表格来总结它们的关系：
| 对象 | 职责 |
|---|---|
Observer |
将普通 JavaScript 对象转换成“可观察”的，通过 Object.defineProperty 实现 getter/setter。 |
Dep |
管理所有依赖于某个数据的 Watcher 对象，维护一个 subs 数组，用于存储所有的 Watcher 对象。 提供 depend() 方法用于收集依赖，notify() 方法用于通知所有订阅者更新。 |
Watcher |
监听数据的变化，并在数据变化时执行更新函数。 通常，一个 Watcher 对应着一个组件或者一个表达式。 在初始化过程中，会触发数据的 getter，从而触发依赖收集。 |
举个例子，假设我们有以下 Vue 组件：
<template>
<div>
<p>姓名：{{ name }}</p>
<p>年龄：{{ age }}</p>
</div>
</template>
<script>
export default {
data() {
return {
name: '张三',
age: 20
};
}
};
</script>在这个组件中，name 和 age 都是响应式数据。 当 Vue 实例化这个组件时，会发生以下事情：
Observer会把data对象转换成“可观察”的。- 会为
name和age各创建一个Dep对象。 - Vue 编译模板时，会为
{{ name }}和{{ age }}各创建一个Watcher对象。 - 当
Watcher初始化时，会触发name和age的getter，从而将这两个Watcher对象添加到对应的Dep的subs数组中。 - 当我们修改
name或age的值时，会触发对应的setter，从而调用Dep.notify()方法，通知所有订阅者更新。 Watcher收到通知后，会执行更新函数，从而更新视图。
依赖关系图
Observer、Dep 和 Watcher 之间的关系可以看作是一个依赖关系图。 每个响应式数据都有一个 Dep 对象，每个 Dep 对象都维护着一个 Watcher 列表。 当数据发生变化时，Dep 会通知所有依赖于它的 Watcher 对象，从而更新视图。
这个依赖关系图是 Vue 响应式系统的核心。 通过这个图，Vue 能够精确地知道哪些 DOM 元素需要更新，从而实现高效的视图更新。
深入 Dep.target 和依赖收集
Dep.target 在依赖收集过程中扮演着至关重要的角色。 让我们再深入了解一下它是如何工作的。
还记得我们之前提到过的 pushTarget 和 popTarget 函数吗？ 它们的作用是临时保存和恢复 Dep.target 的状态。
为什么需要这样做呢？ 因为在组件的渲染过程中，可能会嵌套着其他的组件。 如果我们在一个组件的渲染过程中修改了 Dep.target 的值，那么可能会影响到其他组件的依赖收集。
pushTarget 和 popTarget 函数就是为了解决这个问题而设计的。 在每个组件的渲染开始之前，我们会调用 pushTarget 函数，将当前的 Watcher 对象赋值给 Dep.target，并将其压入一个栈中。 在渲染完成之后，我们会调用 popTarget 函数，从栈中弹出之前的 Watcher 对象，并将其赋值给 Dep.target。
这样，即使在嵌套组件的渲染过程中修改了 Dep.target 的值，也不会影响到其他组件的依赖收集。
代码示例
//假设我们有一个组件
Vue.component('child-component', {
template: '<div>{{message}}</div>',
data: function(){
return {
message: 'Hello from child'
}
}
})
new Vue({
el: '#app',
template: '<div>{{parentMessage}}<child-component></child-component></div>',
data: {
parentMessage: 'Hello from parent'
}
})在这个例子中，当父组件渲染时，会先将父组件对应的 Watcher 对象赋值给 Dep.target。 然后，父组件会渲染子组件。 在子组件的渲染过程中，会创建一个新的 Watcher 对象，并将其赋值给 Dep.target。 当子组件渲染完成后，会调用 popTarget 函数，将父组件对应的 Watcher 对象重新赋值给 Dep.target。
这样，父组件和子组件的依赖收集就不会互相干扰了。
总结
Observer 和 Dep 是 Vue 2 响应式系统的核心。 Observer 负责将普通 JavaScript 对象转换成“可观察”的，Dep 负责管理所有依赖于某个数据的 Watcher 对象。 Watcher 负责监听数据的变化，并在数据变化时执行更新函数。
它们之间的协同工作构建了一个依赖关系图，Vue 通过这个图能够精确地知道哪些 DOM 元素需要更新，从而实现高效的视图更新。
理解 Observer 和 Dep 的职责，对于深入了解 Vue 响应式系统的原理至关重要。 希望今天的讲解能帮助你更好地理解 Vue 的数据驱动视图的秘密。
好了，今天的讲座就到这里，谢谢大家！ 希望各位听众能够对 Vue 的响应式系统有更深入的理解。下次再见！