1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

export default class Dep {
 static target;
 constructor() {
 this.id = uid++;
 this.subs = []; // 存放着 watchers（订阅者）
 }
 addSub(sub) {
 this.subs.push(sub); // 将 watcher 添加到列表（一般由 watcher 调用）
 }
 removeSub(sub) {
 remove(this.subs, sub); // 从列表移除 watcher
 }
 depend() {
 if (Dep.target) {
 /**
 * 进行依赖收集时，Dep.target 会指向待被收集的 watcher
 * 调用 watcher 的 addDep 方法
 * watcher 会调用 dep.addSub 把它自己加到 subs 里
 * 同时，watcher 会把当前 dep 记录下来
 */
 Dep.target.addDep(this);
 }
 }
 notify() {
 // 循环“订阅者列表”，触发 watcher.update，告诉它们“数据变了”
 const subs = this.subs.slice();
 for (let i = 0, l = subs.length; i < l; i++) {
 subs[i].update();
 }
 }
}
/**
 * 用来指向某个正在被求值的 watcher
 * 某个时间点，仅有一个 watcher 可以被求值
 */
Dep.target = null;
/**
 * 由于 Vue 的更新粒度是组件级的，每个组件（render 函数）对应一个 watcher
 * 组件嵌套成树就映射为 render 的调用栈，对应的 watcher 也就保存在“栈”里
 */
const targetStack = [];
// 收集依赖之前调用
export function pushTarget(target: ?Watcher) {
 targetStack.push(target);
 Dep.target = target;
}
// 收集依赖完成调用
export function popTarget() {
 targetStack.pop();
 // 恢复上一个 Dep.target（恢复父级组件对应的 watcher）
 Dep.target = targetStack[targetStack.length - 1];
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201

export default class Watcher {
 /**
 * 每个响应式数据都有自己的 Dep 列表（这个存在于闭包中）；
 * 保存着所有依赖于“此数据”的“订阅者”。
 * 每当访问数据，会触发数据的 getter；
 * 将全局唯一变量 Dep.target 添加到自己的 dep 列表。
 * 每当数据变化，会触发数据的 setter；
 * setter 会通知所有“订阅者”（调用 watcher.update）。
 * 每个 watcher 都维护了一份 dep 列表；
 * 当 watcher 销毁时，需要告诉这些“dep”，
 * 把自己删掉（数据再发生变化，别通知我了）。
 */
 constructor(
 vm, // 组件实例
 expOrFn, // a.b.c || () => a.b.c
 cb, // 副作用回调函数
 options, // computed || deep || lazy
 isRenderWatcher // 是否是组件级别的 watcher
 ) {
 this.vm = vm;
 if (isRenderWatcher) {
 // 如果是组件 renderWatcher，就把自己保存在 vm._watcher 属性上
 vm._watcher = this;
 }
 // vm._watchers 是一个数组，保存着组件的 renderWatcher、computedWatchers 和 watchWatchers
 vm._watchers.push(this);
 if (options) {
 this.deep = !!options.deep; // deep: true || false
 this.user = !!options.user; // 是否是 watchWatcher
 this.lazy = !!options.lazy; // 是否是 computedWatcher
 this.sync = !!options.sync; // immediate: true || false
 this.before = options.before; // watcher.run 执行之前先要执行的逻辑
 } else {
 this.deep = this.user = this.lazy = this.sync = false;
 }
 this.cb = cb; // 保存回调
 this.id = ++uid; // 批处理用的，唯一的标识
 this.active = true; // watcher 是否存活，teardown 之后被置为 false
 this.dirty = this.lazy; // computedGetter 被触发时，会判断数据『是否"脏"了』，脏了的话，就会重新求最新值
 /**
 * 为什么会有 deps、newDeps、depIds、newDepIds？
 * 假设 vm.$watch(() => vm.a ? vm.b : vm.c, () => {...})
 * 上一次收集的依赖和这一次收集的依赖可能不一样（取决于 vm.a 的值）
 * 当 vm.a 为 true 时，收集的依赖为 vm.a、vm.b
 * 当 vm.a 为 false 时，收集的依赖为 vm.a、vm.c
 */
 this.deps = [];
 this.newDeps = [];
 this.depIds = new Set();
 this.newDepIds = new Set();
 this.expression = expOrFn.toString(); // 为了方便报错提示
 /**
 * 解析 expOrFn 为 getter，有两种形式：
 * 1. 属性路径：a.b.c 指向的数据会被 watcher 观察
 * 2. 函数：function () {
 * 函数里访问的所有数据会被 watcher 观察
 * 任何数据变化都会通知 watcher
 * }
 */
 if (typeof expOrFn === 'function') {
 this.getter = expOrFn;
 } else {
 /**
 * 将点语法转换为函数调用：
 * a.b.c 转换为 () => a.b.c
 */
 this.getter = parsePath(expOrFn);
 if (!this.getter) {
 this.getter = noop;
 }
 }
 // 如果不是 computedWatcher，则在实例化的过程中对 getter 求值，作为 prevValue
 this.value = this.lazy ? undefined : this.get();
 }
 // 对 getter 求值并重新出发依赖收集
 get() {
 /**
 * 将 Dep.target 设置为“当前 watcher 实例”
 * 并将“当前 watcher 实例”推进 targetStack
 * 方便“响应式数据”将本 watcher 添加到对应的依赖列表里
 */
 let value;
 pushTarget(this);
 const vm = this.vm;
 try {
 value = this.getter.call(vm, vm); // 从组件实例中获取数据
 } catch (e) {
 if (this.user) {
 handleError(`getter for watcher "${this.expression}"`);
 } else {
 throw e;
 }
 } finally {
 /**
 * 如果要深层监听数据变化的话
 * 递归的触发每个属性的 getter
 * 将 watcher 添加到他们的依赖列表里
 */
 if (this.deep) {
 traverse(value);
 }
 // 恢复上一个 Dep.target 的值
 popTarget();
 // 清理依赖
 this.cleanupDeps();
 }
 return value;
 }
 // 调用 dep.addSub(watcher)，把“自己”添加进去
 addDep(dep) {
 const id = dep.id;
 if (!this.newDepIds.has(id)) {
 this.newDepIds.add(id);
 this.newDeps.push(dep);
 if (!this.depIds.has(id)) {
 dep.addSub(this);
 }
 }
 }
 teardown() {
 if (this.active) {
 // 将自己从组件的 _watchers 里移除
 if (!this.vm._isBeingDestroyed) {
 remove(this.vm._watchers, this);
 }
 let i = this.deps.length;
 while (i--) {
 // 告诉所有“收集了自己作为依赖”的依赖列表，“我要销毁了，把我移除吧”
 this.deps[i].removeSub(this);
 }
 // 完成销毁
 this.active = false;
 }
 }
 // 清理依赖
 cleanupDeps() {
 let i = this.deps.length;
 while (i--) {
 const dep = this.deps[i];
 if (!this.newDepIds.has(dep.id)) {
 dep.removeSub(this);
 }
 }
 let tmp = this.depIds;
 this.depIds = this.newDepIds;
 this.newDepIds = tmp;
 this.newDepIds.clear();
 tmp = this.deps;
 this.deps = this.newDeps;
 this.newDeps = tmp;
 this.newDeps.length = 0;
 }
 // 调用 watcher.addDep(dep)
 depend() {
 let i = this.deps.length;
 while (i--) {
 this.deps[i].depend();
 }
 }
 // 当数据变化，会『被』调用的 update（dep.notify 调用的）
 update() {
 if (this.lazy) {
 /**
 * 如果是 computed，将 watcher 标记为“脏”的
 * 当访问 computed 的值时，会在 computedGetter 里调用 watcher.evaluate 求值
 */
 this.dirty = true;
 } else if (this.sync) {
 // 立即调用 run 方法，重新求值并执行回调，一般用来在组件初始化阶段执行一次 cb
 this.run();
 } else {
 // 把 watcher 加入异步队列
 queueWatcher(this);
 }
 }
 /**
 * watcher 接收到通知后，如果实例没被销毁
 * 重新访问 getter 获取最新值
 * 如果数据和之前的不一样
 * 或者数据是对象或数组
 * 或者开启了深层监听
 * 说明数据变化了
 * 需要执行回调
 */
 run() {
 if (this.active) {
 const value = this.get(); // 重新求值作为最新的值，并对比前后值；数据变化才会执行 cb
 if (value !== this.value || isObject(value) || this.deep) {
 const oldValue = this.value;
 this.value = value;
 // 将新/旧值都传给回调
 this.cb.call(this.vm, value, oldValue);
 }
 }
 }
 // 给 computed 惰性求值用的
 evaluate() {
 this.value = this.get();
 this.dirty = false; // 求值完了之后，会标记为『干净』
 }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

// 将 obj[key] 转换为 getter/setters 形式
export function defineReactive(obj, key, val, customSetter, shallow) {
 const property = Object.getOwnPropertyDescriptor(obj, key);
 if (property && property.configurable === false) {
 return;
 }
 const dep = new Dep();
 // 如果之前设置过 getter/setter，先将他们保存下来
 const getter = property && property.get;
 const setter = property && property.set;
 if ((!getter || setter) && arguments.length === 2) {
 val = obj[key];
 }
 // 如果要深层转换并且 val 是复杂数据的话，递归调用 observe
 let childOb = !shallow && observe(val); // val.__ob__ || undefined
 Object.defineProperty(obj, key, {
 enumerable: true,
 configurable: true,
 get: function reactiveGetter() {
 /**
 * watcher 的 getter 被调用之前会执行 pushTarget
 * 将 Dep.target 设置为 watcher，并把自身 push 到 targetStack
 * 调用 dep.depend，进而调用 watcher.addDep 方法
 * 最终，watcher 被收集到 dep.subs 里，dep 被 push 到 watcher.dep 里
 */
 const value = getter ? getter.call(obj) : val;
 if (Dep.target) {
 dep.depend();
 if (childOb) {
 childOb.dep.depend();
 if (Array.isArray(value)) {
 dependArray(value);
 }
 }
 }
 // 返回给 watcher
 return value;
 },
 set: function reactiveSetter(newVal) {
 const value = getter ? getter.call(obj) : val;
 // 对 newVal 和 value 进行浅比较，没变化就返回
 if (newVal === value || (newVal !== newVal && value !== value)) {
 return;
 }
 if (customSetter) {
 // 自定义 setter（比如，computed 可以自定义 setter）
 customSetter();
 }
 // 只读属性，直接返回
 if (getter && !setter) return;
 if (setter) {
 setter.call(obj, newVal);
 } else {
 val = newVal;
 }
 childOb = !shallow && observe(newVal);
 /**
 * dep.notify 会循环 dep.subs，调用每个 watcher.update
 * watcher 接到通知，会根据“配置”执行相应动作
 */
 dep.notify();
 }
 });
}
// 收集数组元素上的依赖关系，因为无法对数组元素的访问做拦截
function dependArray(value) {
 for (let e, i = 0, l = value.length; i < l; i++) {
 e = value[i];
 e && e.__ob__ && e.__ob__.dep.depend();
 if (Array.isArray(e)) {
 // 递归调用
 dependArray(e);
 }
 }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

// 为“值”创建观察者实例的工厂函数
export function observe(value, asRootData) {
 // value 不能是 VNode，也不能是 Vue 组件实例
 if (!isObject(value) || value instanceof VNode) {
 return;
 }
 let ob;
 if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
 // 观察者实例保存在 __ob__ 属性上
 ob = value.__ob__;
 } else if (
 shouldObserve &&
 (Array.isArray(value) || isPlainObject(value)) &&
 Object.isExtensible(value) &&
 !value._isVue
 ) {
 ob = new Observer(value);
 }
 if (asRootData && ob) {
 ob.vmCount++;
 }
 return ob;
}
/**
 * 对数组部分方法进行遮蔽（不涉及 Array.prototype 的修改）
 * 这也表明了为什么 arr[i] = j、arr.length = 0 不会触发更新
 */
const arrayProto = Array.prototype;
export const arrayMethods = Object.create(arrayProto);
['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'].forEach(
 function (method) {
 // 将原来的方法保存在闭包里
 const original = arrayProto[method];
 def(arrayMethods, method, function mutator(...args) {
 // 缓存正常操作的结果
 const result = original.apply(this, args);
 const ob = this.__ob__;
 let inserted;
 switch (method) {
 case 'push':
 case 'unshift':
 inserted = args;
 break;
 case 'splice':
 inserted = args.slice(2);
 break;
 }
 // 先单独对新插入的数据进行“观察”
 if (inserted) ob.observeArray(inserted);
 // 通知“订阅者”
 ob.dep.notify();
 return result;
 });
 }
);
export class Observer {
 constructor(value) {
 // 保存订阅了 value 本身的 watcher
 this.dep = new Dep();
 this.value = value;
 // 将此对象作为 rootData 的 Vue 实例数量
 this.vmCount = 0;
 // 将 observer 保存到 __ob__ 属性上
 def(value, '__ob__', this);
 if (Array.isArray(value)) {
 // 对于数组，重写原型链上的数组操作方法
 value.__proto__ = arrayMethods;
 // 并对数组的子元素依次调用 observe
 this.observeArray(value);
 } else {
 // 对于对象，遍历 value，将其可枚举属性转换为 getter/setter 形式
 this.walk(value);
 }
 }
 walk(obj) {
 const keys = Object.keys(obj);
 for (let i = 0; i < keys.length; i++) {
 defineReactive(obj, keys[i]);
 }
 }
 observeArray(items) {
 for (let i = 0, l = items.length; i < l; i++) {
 observe(items[i]);
 }
 }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

export const reactiveMap = new WeakMap<Target, any>();
export const readonlyMap = new WeakMap<Target, any>();
function createReactiveObject(
 target: Target,
 isReadonly: boolean,
 baseHandlers: ProxyHandler<any>,
 collectionHandlers: ProxyHandler<any>
) {
 // 只有 Object、Array、Map、Set、WeakMap、WeakSet 才可以转换为响应式数据
 if (!isObject(target)) {
 return target;
 }
 // target 已经不是原始数据，直接返回
 if (target.__v_raw && !(isReadonly && target.__v_isReactive)) {
 return target;
 }
 // target 已经存在于 readonlyMap 或 reactiveMap 中
 const proxyMap = isReadonly ? readonlyMap : reactiveMap;
 const existingProxy = proxyMap.get(target);
 if (existingProxy) {
 return existingProxy;
 }
 // const targetType = getTargetType(target)
 // if (targetType === TargetType.INVALID) {
 // return target
 // }
 if (target.__v_skip || !Object.isExtensible(target)) {
 return target;
 }
 const toRawType = v => Object.prototype.toString.call(v).slice(8, -1);
 if (targetTypeMap(toRawType(value)) === TargetType.INVALID) {
 return target;
 }
 // 返回一个 proxy
 const proxy = new Proxy(
 target,
 /**
 * Object、Array 使用 baseHandlers
 * Map、Set、WeakMap、WeakSet 使用 collectionHandlers
 */
 targetType === TargetType.COLLECTION ? collectionHandlers : baseHandlers
 );
 proxyMap.set(target, proxy);
 return proxy;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117

export function reactive(target) {
 // readonly 数据直接返回
 if (target && target.__v_isReadonly) {
 return target;
 }
 return createReactiveObject(
 target,
 false,
 {
 get(target, key, receiver) {
 if (key === '__v_isReactive') {
 return true;
 } else if (key === '__v_isReadonly') {
 return false;
 } else if (key === '__v_raw' && receiver === reactiveMap.get(target)) {
 // 无论是 readonly 还是 reactive，访问 __v_raw 都能得到原始数据
 return target;
 }
 const targetIsArray = isArray(target);
 // 如果 target 是数组，key 是 arrayInstrumentations 的一个属性
 if (targetIsArray && hasOwn(arrayInstrumentations, key)) {
 // arrayInstrumentations 包含了对数组方法的劫持
 return Reflect.get(arrayInstrumentations, key, receiver);
 }
 // 保存正常的结果
 const res = Reflect.get(target, key, receiver);
 // 如果 key 是内建 Symbol 或者是 __proto__/__v_isRef，不需要依赖收集，直接返回
 if (
 isSymbol(key)
 ? builtInSymbols.has(key)
 : key === `__proto__` || key === `__v_isRef`
 ) {
 return res;
 }
 track(target, 'get', key);
 if (isRef(res)) {
 // 如果 target 是一个数组且 key 是一个整数，就不应该把 res 自动展开
 const shouldUnwrap = !(targetIsArray && isIntegerKey(key));
 return shouldUnwrap ? res.value : res;
 }
 if (isObject(res)) {
 // 把返回值也 proxy 一下；惰性 proxy，访问到了再 reactive(res)
 return reactive(res);
 }
 return res;
 },
 set(target, key, value, receiver) {
 const oldValue = target[key];
 value = toRaw(value);
 // 如果 target 不是数组，旧值为 ref，新值不为 ref
 if (!isArray(target) && isRef(oldValue) && !isRef(value)) {
 // 更新旧值的 value 为新值
 oldValue.value = value;
 return true;
 }
 const hadKey =
 // 如果 target 为数组，并且 key 为整数
 isArray(target) && isIntegerKey(key)
 ? Number(key) < target.length
 : hasOwn(target, key);
 const result = Reflect.set(target, key, value, receiver);
 // 如果 target 是原始原型链中的某项内容，则不要触发
 if (target === toRaw(receiver)) {
 if (!hadKey) {
 // key 不存在，add 行为
 trigger(target, 'add', key, value);
 } else if (hasChanged(value, oldValue)) {
 // 新旧值不同，set 行为
 trigger(target, 'set', key, value, oldValue);
 }
 }
 return result;
 },
 has(target, key) {
 const result = Reflect.has(target, key);
 if (!isSymbol(key) || !builtInSymbols.has(key)) {
 track(target, 'has', key);
 }
 return result;
 },
 deleteProperty(target, key) {
 const hadKey = hasOwn(target, key);
 const oldValue = (target as any)[key];
 const result = Reflect.deleteProperty(target, key);
 if (result && hadKey) {
 // key 本就存在，才可能有 delete 行为
 trigger(target, 'delete', key, undefined, oldValue);
 }
 return result;
 },
 ownKeys(target) {
 // 依赖收集
 track(target, 'iterate', isArray(target) ? 'length' : ITERATE_KEY);
 return Reflect.ownKeys(target);
 }
 },
 // Map、Set、WeakMap、WeakSet
 {
 get(target, key, receiver) {
 if (key === '__v_isReactive') {
 return true;
 } else if (key === '__v_isReadonly') {
 return false;
 } else if (key === '__v_raw') {
 return target;
 }
 return Reflect.get(
 hasOwn(mutableInstrumentations, key) && key in target
 ? mutableInstrumentations
 : target,
 key,
 receiver
 );
 }
 }
 );
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

export function readonly(target) {
 return createReactiveObject(
 target,
 true,
 // Object、Array
 {
 get(target, key, receiver) {
 if (key === '__v_isReactive') {
 return false;
 } else if (key === '__v_isReadonly') {
 return true;
 } else if (key === '__v_raw' && receiver === readonlyMap.get(target)) {
 return target;
 }
 const targetIsArray = isArray(target);
 const res = Reflect.get(target, key, receiver);
 if (
 isSymbol(key)
 ? builtInSymbols.has(key)
 : key === `__proto__` || key === `__v_isRef`
 ) {
 return res;
 }
 if (isRef(res)) {
 // 如果 target 是一个数组且 key 是一个整数，就不应该把 res 自动展开
 const shouldUnwrap = !targetIsArray || !isIntegerKey(key);
 return shouldUnwrap ? res.value : res;
 }
 // 把返回值也 proxy 一下；惰性 proxy，访问到了再 readonly(res)
 if (isObject(res)) return readonly(res);
 return res;
 },
 set(target, key) {
 console.warn('target is readonly');
 return true;
 },
 deleteProperty(target, key) {
 console.warn('target is readonly');
 return true;
 }
 },
 // Map、Set、WeakMap、WeakSet
 {
 get(target, key, receiver) {
 if (key === '__v_isReactive') {
 return !true;
 } else if (key === '__v_isReadonly') {
 return true;
 } else if (key === '__v_raw') {
 return target;
 }
 return Reflect.get(
 hasOwn(readonlyInstrumentations, key) && key in target
 ? readonlyInstrumentations
 : target,
 key,
 receiver
 );
 }
 }
 );
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

function createRef(rawValue, shallow = false) {
 if (rawValue && rawValue.__v_isRef === true) {
 return rawValue; // 已经是包装类型，就别来凑热闹了
 }
 return new RefImpl(rawValue, shallow);
}
class RefImpl<T> {
 private _value: T;
 public readonly __v_isRef = true;
 constructor(private _rawValue: T, public readonly _shallow = false) {
 this._value = _shallow
 ? _rawValue
 : isObject(_rawValue)
 ? reactive(_rawValue)
 : _rawValue;
 }
 get value() {
 track(toRaw(this), 'get', 'value');
 return this._value;
 }
 set value(newVal) {
 if (hasChanged(toRaw(newVal), this._rawValue)) {
 this._rawValue = newVal;
 this._value = this._shallow ? newVal : convert(newVal);
 trigger(toRaw(this), 'set', 'value', newVal);
 }
 }
}

1
2
3

export function ref(value) {
 return createRef(value);
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172

// 追踪类型
export const enum TrackOpTypes {
 GET = 'get', // 属性读取
 HAS = 'has', // in 操作符（不包括 for...in）
 ITERATE = 'iterate' // 迭代器
}
// 触发类型
export const enum TriggerOpTypes {
 SET = 'set', // 属性设置
 ADD = 'add', // 属性添加
 DELETE = 'delete', // 属性删除
 CLEAR = 'clear' // 清空数据
}
// 依赖列表（2.x Array => 3.x Set）
type Dep = Set<ReactiveEffect>;
// key 对应的依赖列表 [[[key, dep]],...]
type KeyToDepMap = Map<any, Dep>;
let shouldTrack = true;
let activeEffect: ReactiveEffect | undefined;
const trackStack: boolean[] = [];
/**
 * target 的 key 对应的依赖列表，储存着 target -> key -> dep 的联系
 * 为什么不用 Map 而用 WeakMap？
 * 1. Map（WeakMap）内部有两个数组，分别存 key 和 value；所以在 Map（WeakMap）内部，key 和 value 并没有真正建立联系；
 * 2. Map 的 key 和内存地址绑定，外部引用的消失不会影响绑定关系；WeakMap 内部对 key 的引用都是弱引用，不会阻止垃圾回收；
 * 3. Map 的 key 可以为任意类型，WeakMap 的 key 只能为对象；
 * 4. Map 可以被遍历，WeakMap 不能被遍历。
 * 这里使用 WeakMap 可以使内存及时被释放。
 * 同理 Set 和 WeakSet 的区别如下：
 * 1. WeakSet 的成员都是弱引用；
 * 2. WeakSet 的成员都是对象；
 * 3. WeakSet 不能遍历。
 * 只要外部引用消失，立即清除就会帮我们自动回收
 */
const targetMap = new WeakMap<any, KeyToDepMap>();
export const ITERATE_KEY = Symbol('');
export const MAP_KEY_ITERATE_KEY = Symbol('');
/**
 * 暂停追踪，使用场景：
 * 1. 在对数组执行一些可能间接改变 length 属性的操作（push、pop、shift、unshift、splice）；
 * 2. 在生命周期函数里暂停追踪，因为可能会触发潜在的 effect；
 * 3. 调用 applyOptions 之前（兼容 2.x 语法）；
 * 4. 调用内置的 warn 时；
 * 5. 调用 setup 之前；
 */
export function pauseTracking() {
 trackStack.push(shouldTrack);
 shouldTrack = false;
}
// 开始追踪
export function enableTracking() {
 trackStack.push(shouldTrack);
 shouldTrack = true;
}
// 重置到上一步
export function resetTracking() {
 const last = trackStack.pop();
 shouldTrack = last === undefined ? true : last;
}
/**
 * 收集 activeEffect（在对数据进行 get、has、iterate 操作时）：
 * 每次 track，就是把当前激活的副作用函数 activeEffect 作为依赖；
 * 然后收集到 target 相关的 depsMap 对应 key 下的依赖集合 dep 中。
 */
export function track(target: object, type: TrackOpTypes, key: unknown) {
 // 没有 activeEffect，就先不 track
 if (!shouldTrack || activeEffect === undefined) {
 return;
 }
 /**
 * targetMap 是一个 WeakMap；
 * targetMap.get(target) 是一个 Map
 * 保存着 target 的每个 key 对应的 effects（很像 2.x 里的 watcher，保存在 Set 里）
 * targetMap = {
 * [target]: {
 * [key]: [effect1, effect2, effect3,...],
 * ...
 * },
 * ...
 * }
 */
 let depsMap = targetMap.get(target);
 if (!depsMap) {
 targetMap.set(target, (depsMap = new Map()));
 }
 let dep = depsMap.get(key);
 if (!dep) {
 depsMap.set(key, (dep = new Set()));
 }
 if (!dep.has(activeEffect)) {
 dep.add(activeEffect); // 没有就添加
 activeEffect.deps.push(dep); // activeEffect 在自己 deps 里也保存一份
 }
}
// 触发收集到的 effects（在对数据进行 set、add、delete、clear 操作时）
export function trigger(
 target: object,
 type: TriggerOpTypes,
 key?: unknown,
 newValue?: unknown,
 oldValue?: unknown,
 oldTarget?: Map<unknown, unknown> | Set<unknown>
) {
 const depsMap = targetMap.get(target);
 // target 没有被 track 过
 if (!depsMap) return;
 const effects = new Set<ReactiveEffect>();
 // 将 effectsToAdd 按条件添加到 effects 里
 const add = (effectsToAdd: Set<ReactiveEffect> | undefined) => {
 if (effectsToAdd) {
 effectsToAdd.forEach(effect => {
 if (effect !== activeEffect || effect.allowRecurse) {
 effects.add(effect);
 }
 });
 }
 };
 if (type === 'clear') {
 // Map/Set 要被清空，触发 target 下的所有 effects
 depsMap.forEach(add);
 } else if (key === 'length' && isArray(target)) {
 // 触发数组“长度变化”对应的 effect
 depsMap.forEach((dep, k) => {
 // 遍历的时候，k 为 0、1、2、3、...、length
 if (k === 'length' || k >= newValue) {
 // target['length'] 和 target[newValue～k] 对应的 effects 都要加去
 add(dep);
 }
 });
 } else {
 // 处理 SET | ADD | DELETE
 if (key !== void 0) {
 // key 不为 undefined 的情况
 add(depsMap.get(key));
 }
 // 处理 ADD | DELETE | SET 的 iteration key
 switch (type) {
 case 'add':
 if (!isArray(target)) {
 add(depsMap.get(ITERATE_KEY));
 if (isMap(target)) {
 add(depsMap.get(MAP_KEY_ITERATE_KEY));
 }
 } else if (isIntegerKey(key)) {
 // 数组 length 改变
 add(depsMap.get('length'));
 }
 break;
 case 'delete':
 if (!isArray(target)) {
 add(depsMap.get(ITERATE_KEY));
 if (isMap(target)) {
 add(depsMap.get(MAP_KEY_ITERATE_KEY));
 }
 }
 break;
 case 'set':
 if (isMap(target)) {
 add(depsMap.get(ITERATE_KEY));
 }
 break;
 }
 }
 // 循环 effects 调用 track 收集的 effect
 effects.forEach((effect: ReactiveEffect) => {
 if (effect.options.scheduler) {
 effect.options.scheduler(effect);
 } else {
 effect();
 }
 });
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96

let uid = 0;
const effectStack: ReactiveEffect[] = [];
export interface ReactiveEffect<T = any> {
 (): T; // ReactiveEffect 可调用
 _isEffect: true; // ReactiveEffect._isEffect = true
 active: boolean; // ReactiveEffect.active = false
 allowRecurse: boolean; // ReactiveEffect.allowRecurse = true
 deps: Array<Dep>; // ReactiveEffect.deps = []
 id: number; // ReactiveEffect.id = 123
 options: ReactiveEffectOptions; // ReactiveEffect.options = {}
 raw: () => T; // ReactiveEffect.raw = ReactiveEffect
}
export interface ReactiveEffectOptions {
 allowRecurse?: boolean;
 lazy?: boolean;
 onStop?: () => void;
 scheduler?: (job: ReactiveEffect) => void;
}
/**
 * 将 fn（普通副作用）转换为 ReactiveEffect（自动副作用），场景如下：
 * 1. setupRenderEffect 中，instance.update = effect(function componentEffect() {...})
 * 2. computed 中，this._value = (effect(getter, {}))()
 * 3. watch 中，newValue = (effect(getter, {}))()
 */
export function effect(fn, options = {}) {
 if (fn && fn._isEffect === true) {
 fn = fn.raw;
 }
 const effect = createReactiveEffect(fn, options);
 // 如果不是 computed，先运行一下，触发对 fn 里使用到的数据的操作
 if (!options.lazy) {
 effect();
 }
 return effect;
}
function createReactiveEffect<T = any>(
 fn: () => T,
 options: ReactiveEffectOptions
): ReactiveEffect<T> {
 const effect = function reactiveEffect(): unknown {
 if (!effect.active) {
 return options.scheduler ? undefined : fn();
 }
 if (!effectStack.includes(effect)) {
 cleanup(effect);
 try {
 enableTracking();
 effectStack.push(effect);
 // 将自身设置为 activeEffect，方便 track 对自己进行追踪，从而进行依赖收集
 activeEffect = effect;
 // 每次调用 effect，都会执行 fn
 return fn();
 } finally {
 // 收集完了之后，就重置为收集之前的状态
 effectStack.pop();
 resetTracking();
 activeEffect = effectStack[effectStack.length - 1];
 }
 }
 } as ReactiveEffect;
 effect._isEffect = true;
 effect.active = true;
 effect.allowRecurse = !!options.allowRecurse;
 effect.deps = [];
 effect.id = uid++;
 effect.options = options;
 effect.raw = fn;
 return effect;
}
// 清除 effect
function cleanup(effect: ReactiveEffect) {
 // 每个 effect 都保存了“自己是谁的订阅者”
 const { deps } = effect;
 if (deps.length) {
 for (let i = 0; i < deps.length; i++) {
 // 通知他们，把自己删掉；如果再更新的话，不要通知我
 deps[i].delete(effect);
 }
 // 清空 effect.deps
 deps.length = 0;
 }
}
/**
 * 终止 effect，使用场景如下：
 * 1. watcher 返回的函数中，用于取消 watcher 的 effect
 * 2. unmountComponent 时，用于清除组件的 effect
 */
export function stop(effect: ReactiveEffect) {
 if (effect.active) {
 cleanup(effect);
 if (effect.options.onStop) {
 effect.options.onStop();
 }
 effect.active = false;
 }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

export function queueWatcher(watcher: Watcher) {
 // 获取 watcher 的唯一的 id
 const id = watcher.id;
 if (has[id] == null) {
 // 同一个 watcher 被多次 update，也只进入队列一次
 has[id] = true;
 if (!flushing) {
 queue.push(watcher);
 } else {
 // 如果正在清空队列，将新来的 watcher 添加到合适的位置
 let i = queue.length - 1;
 while (i > index && queue[i].id > watcher.id) {
 i--;
 }
 queue.splice(i + 1, 0, watcher);
 }
 if (!waiting) {
 waiting = true;
 // 在下个事件循环就清空队列并执行所有 watcher 回调
 nextTick(flushSchedulerQueue);
 }
 }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

function flushSchedulerQueue() {
 currentFlushTimestamp = Date.now();
 flushing = true;
 let watcher, id;
 /**
 * 在清空之前，先按照 id 进行排序：
 * 1. 组件更新/渲染总是先父后子（父组件先创建）
 * 2. vm.$watch 比 renderWatch 先运行（因为 vm.$watch 先创建）
 * 3. 在父组件 watcher 运行期间，如果子组件被销毁，他的 watcher 会被跳过（watcher.active = false）
 */
 queue.sort((a, b) => a.id - b.id);
 // 不要缓存队列长度，因为随时可能会变
 for (index = 0; index < queue.length; index++) {
 watcher = queue[index];
 if (watcher.before) {
 // 2.x 里唯一用到的地方是 callHook(vm, 'beforeUpdate')
 watcher.before();
 }
 id = watcher.id;
 has[id] = null;
 watcher.run();
 if (has[id] != null) {
 circular[id] = (circular[id] || 0) + 1;
 if (circular[id] > 100) {
 // 判断是否是死循环
 break;
 }
 }
 }
 // 在重置状态之前保留队列的副本
 const activatedQueue = activatedChildren.slice();
 const updatedQueue = queue.slice();
 resetSchedulerState(); // 重置队列状态
 callActivatedHooks(activatedQueue); // callHook(vm, 'activated')
 callUpdatedHooks(updatedQueue); // callHook(vm, 'updated')
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189

/**
 * 一共有三种队列：preFlushCbs、queue、postFlushCbs
 * 1. preFlushCbs，清空 queue 之前执行的回调队列（渲染之前需要的任务）
 * 2. queue，“组件渲染”任务队列
 * 3. postFlushCbs，清空 queue 之后执行的回调队列（渲染之后需要的任务）
 * 每次刷新（flush）的过程：清空 preFlushCbs -> 清空 queue -> 清空 postFlushCbs
 */
export interface SchedulerJob {
 (): void;
 id?: number; // 唯一的 jobID，仅在 RAWEffect（例如，组件渲染）上出现
 /**
 * 是否允许 job 递归触发自身
 * 默认情况下，一个 job 不能触发自身
 * 因为一些内建方法的调用（例如，Array.prototype.push）会导致无限循环
 * 只有在“组件更新函数”和“watch 回调”的情况下，这个选项才可以为 true
 * 组件更新可能会导致子组件的 props 更新，进而触发子组件的“flush: pre”的 watch 回调
 */
 allowRecurse?: boolean;
}
export type SchedulerCb = Function & { id?: number };
export type SchedulerCbs = SchedulerCb | SchedulerCb[];
type CountMap = Map<SchedulerJob | SchedulerCb, number>;
let isFlushing = false; // 是否正在刷新
let isFlushPending = false; // 是否正在等待刷新
// 还未被执行的 pre/post 任务，如果当前 tick 正在 flushPreCbs/flushPostCbs 的时候，有新的任务进来，会被添加到这个数组中
const pendingPreFlushCbs: SchedulerCb[] = [];
const pendingPostFlushCbs: SchedulerCb[] = [];
// 正在被执行的任务，此时如果 pendingPreFlushCbs/pendingPostFlushCbs 中有新的任务进来的时候，会被合并到这个队列中被继续执行
let activePreFlushCbs: SchedulerCb[] | null = null;
let activePostFlushCbs: SchedulerCb[] | null = null;
let preFlushIndex = 0;
let postFlushIndex = 0;
let currentFlushPromise: Promise<void> | null = null;
let currentPreFlushParentJob: SchedulerJob | null = null;
const resolvedPromise: Promise<any> = Promise.resolve();
// 在下个事件循环刷新 job 队列
function queueFlush() {
 // 在没有刷新队列和没有等待刷新队列的情况下，进入「刷新 job 队列」任务
 if (!isFlushing && !isFlushPending) {
 isFlushPending = true; // 正在等待刷新
 currentFlushPromise = resolvedPromise.then(flushJobs);
 }
}
let flushIndex = 0;
// 异步渲染任务队列
const queue: SchedulerJob[] = [];
/**
 * 渲染任务入列：
 * 1. 强制组件重新渲染：vm.$forceUpdate: i => () => queueJob(i.update)
 * 2. 强制父组件重新渲染：queueJob(instance.parent.update)
 */
export function queueJob(job: SchedulerJob) {
 /**
 * 重复数据消除搜索使用 Array.prototype.include 的 startIndex 参数
 * 判断队列中是否已有该 job，没有才会添加到任务队列中，防止任务重新执行
 * 默认情况下，搜索索引包含正在运行的当前 job，因此它无法再次递归触发自身
 */
 if (
 (!queue.length ||
 !queue.includes(
 job,
 isFlushing && job.allowRecurse ? flushIndex + 1 : flushIndex
 )) &&
 job !== currentPreFlushParentJob
 ) {
 // 就把 job 加入队列
 queue.push(job);
 // 并且在下个事件循环“刷新 job 队列”
 queueFlush();
 }
}
// 将失效的 job 从队列中剔除（主要用来避免子组件重新渲染）
export function invalidateJob(job: SchedulerJob) {
 const i = queue.indexOf(job);
 if (i > -1) {
 queue.splice(i, 1);
 }
}
// 刷新 job 队列
function flushJobs(seen?: CountMap) {
 isFlushPending = false;
 isFlushing = true; // 队列正在刷新
 flushPreFlushCbs(seen); // 刷新前置回调队列
 /**
 * 刷新队列前，先排序；确保：
 * 1. 组件的更新顺序是由父到子（父比子先创建，renderEffect 的优先级也应该如此）
 * 2. 如果组件在父级更新之后被卸载了，他就可以跳过更新
 */
 queue.sort((a, b) => getId(a) - getId(b));
 try {
 // 循环 job 队列
 for (flushIndex = 0; flushIndex < queue.length; flushIndex++) {
 const job = queue[flushIndex];
 if (job) {
 // 将 job 放到 try...catch 里执行
 callWithErrorHandling(job, null, ErrorCodes.SCHEDULER);
 }
 }
 } finally {
 flushIndex = 0;
 queue.length = 0;
 flushPostFlushCbs(seen); // 刷新后置回调队列
 isFlushing = false;
 currentFlushPromise = null;
 // 回调可能将新的 job 添加到了 job 队列，那就再次刷新 job 队列
 if (queue.length || pendingPostFlushCbs.length) {
 flushJobs(seen);
 }
 }
}
// 将回调函数加入队列
function queueCb(
 cb: SchedulerCbs,
 activeQueue: SchedulerCb[] | null, // 激活的队列？
 pendingQueue: SchedulerCb[], // 等待的队列？
 index: number
) {
 // 向 pendingQueue 添加回调
 if (!isArray(cb)) {
 if (
 !activeQueue ||
 !activeQueue.includes(
 cb,
 (cb as SchedulerJob).allowRecurse ? index + 1 : index
 )
 ) {
 pendingQueue.push(cb);
 }
 } else {
 pendingQueue.push(...cb);
 }
 queueFlush();
}
// 将「渲染之“前”要执行的回调」入列（flash: pre）
export function queuePreFlushCb(cb: SchedulerCb) {
 queueCb(cb, activePreFlushCbs, pendingPreFlushCbs, preFlushIndex);
}
// 将「渲染之“后”要执行的回调」入列
export function queuePostFlushCb(cb: SchedulerCbs) {
 queueCb(cb, activePostFlushCbs, pendingPostFlushCbs, postFlushIndex);
}
/**
 * 刷新「渲染之“前”要执行的回调」
 * 渲染更新之前，触发因为 props 更新而运行的 watcher（flash: pre）
 */
export function flushPreFlushCbs(
 seen?: CountMap,
 parentJob: SchedulerJob | null = null
) {
 if (pendingPreFlushCbs.length) {
 currentPreFlushParentJob = parentJob;
 activePreFlushCbs = [...new Set(pendingPreFlushCbs)];
 pendingPreFlushCbs.length = 0;
 for (
 preFlushIndex = 0;
 preFlushIndex < activePreFlushCbs.length;
 preFlushIndex++
 ) {
 activePreFlushCbs[preFlushIndex]();
 }
 activePreFlushCbs = null;
 preFlushIndex = 0;
 currentPreFlushParentJob = null;
 // 递归刷新，直到耗尽为止
 flushPreFlushCbs(seen, parentJob);
 }
}
// 刷新「渲染之“后”要执行的回调」
export function flushPostFlushCbs(seen?: CountMap) {
 if (pendingPostFlushCbs.length) {
 const deduped = [...new Set(pendingPostFlushCbs)];
 pendingPostFlushCbs.length = 0;
 if (activePostFlushCbs) {
 activePostFlushCbs.push(...deduped);
 return;
 }
 activePostFlushCbs = deduped;
 activePostFlushCbs.sort((a, b) => getId(a) - getId(b));
 for (
 postFlushIndex = 0;
 postFlushIndex < activePostFlushCbs.length;
 postFlushIndex++
 ) {
 activePostFlushCbs[postFlushIndex]();
 }
 activePostFlushCbs = null;
 postFlushIndex = 0;
 }
}