? var Observer = function Observer (value) {
? ? this.value = value;
? ? this.dep = new Dep();
? ? this.vmCount = 0;
? ? def(value, '__ob__', this);
? ? if (Array.isArray(value)) {
? ? ? if (hasProto) {
? ? ? ? protoAugment(value, arrayMethods);
? ? ? } else {
? ? ? ? copyAugment(value, arrayMethods, arrayKeys);
? ? ? }
? ? ? this.observeArray(value);
? ? } else {
? ? ? this.walk(value); // 這是非數組值添加get set 回調
? ? }
? };

? Observer.prototype.walk = function walk (obj) {
? ? var keys = Object.keys(obj);
? ? for (var i = 0; i < keys.length; i++) {
? ? ? defineReactive$$1(obj, keys[i]);
? ? }
? };

// 這個是為obj上的key添加get set方法的核心邏輯
? function defineReactive$$1 (
? ? obj,
? ? key,
? ? val,
? ? customSetter,
? ? shallow
? ) {
? ? var dep = new Dep();
? ? var property = Object.getOwnPropertyDescriptor(obj, key);
? ? if (property && property.configurable === false) {
? ? ? return
? ? }
? ? // cater for pre-defined getter/setters
? ? var getter = property && property.get;
? ? var setter = property && property.set;
? ? if ((!getter || setter) && arguments.length === 2) {
? ? ? val = obj[key];
? ? }
? ? var childOb = !shallow && observe(val);
? ? Object.defineProperty(obj, key, {
? ? ? enumerable: true,
? ? ? configurable: true,
? ? ? get: function reactiveGetter () {
? ? ? ? ?// 省略N行
? ? ? },
? ? ? set: function reactiveSetter (newVal) {
? ? ? ?// 省略N行
? ? ? }
? ? });
? }

function defineReactive$$1 (
? ? obj,
? ? key,
? ? val,
? ? customSetter,
? ? shallow
? ) {
? ? var dep = new Dep(); // 創(chuàng)建一個Dep實例
? ? var property = Object.getOwnPropertyDescriptor(obj, key);
? ? if (property && property.configurable === false) {
? ? ? return
? ? }
? ? // cater for pre-defined getter/setters
? ? var getter = property && property.get;
? ? var setter = property && property.set;
? ? if ((!getter || setter) && arguments.length === 2) {
? ? ? val = obj[key];
? ? }
? ? var childOb = !shallow && observe(val);
? ? Object.defineProperty(obj, key, {
? ? ? enumerable: true,
? ? ? configurable: true,
? ? ? get: function reactiveGetter () {
? ? ? ? var value = getter ? getter.call(obj) : val;
? ? ? ? if (Dep.target) {
? ? ? ? ? //在此處將當前watcher加入到dep中
? ? ? ? ? dep.depend();?
? ? ? ? ? if (childOb) {
? ? ? ? ? ? childOb.dep.depend();
? ? ? ? ? ? if (Array.isArray(value)) {
? ? ? ? ? ? ? dependArray(value);
? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? }
? ? ? ? return value
? ? ? },

Dep.target = null;

? Watcher.prototype.get = function get () {
? ?// 設置當前watcher到全局變量上去
? ? pushTarget(this);
? ? var value;
? ? // 省略N行代碼
? ? return value
? };

?function pushTarget (target) {
? ? targetStack.push(target);
? ? Dep.target = target;
? }

?if (Dep.target) {
? ? ? ? ? //在此處將當前watcher加入到dep中
? ? ? ? ? dep.depend();?

?Dep.prototype.depend = function depend () {
? ? // Dep.target 對應的就是上面的全局變量里的watcher
? ? if (Dep.target) {
? ? ? Dep.target.addDep(this);
? ? }
? };

? Watcher.prototype.addDep = function addDep (dep) {
? ? var id = dep.id;
? ? if (!this.newDepIds.has(id)) {
? ? ? this.newDepIds.add(id);
? ? ? // ?會在watcher的實際例子里維護一個所以訂閱的dep的數組
? ? ? this.newDeps.push(dep);?
? ? ? if (!this.depIds.has(id)) {
? ? ? ? dep.addSub(this);?
? ? ? }
? ? }
? };
? Dep.prototype.addSub = function addSub (sub) {
? // 繞了一大圈，最終就是把watcher 塞到dep實例的subs數組里了。
? ? this.subs.push(sub);
? };

set: function reactiveSetter (newVal) {
? ? ? ? var value = getter ? getter.call(obj) : val;
? ? ? ? /* eslint-disable no-self-compare */
? ? ? ? if (newVal === value || (newVal !== newVal && value !== value)) {
? ? ? ? ? return
? ? ? ? }
? ? ? ? /* eslint-enable no-self-compare */
? ? ? ? if (customSetter) {
? ? ? ? ? customSetter();
? ? ? ? }
? ? ? ? // #7981: for accessor properties without setter
? ? ? ? if (getter && !setter) { return }
? ? ? ? if (setter) {
? ? ? ? ? setter.call(obj, newVal);
? ? ? ? } else {
? ? ? ? ? val = newVal;
? ? ? ? }
? ? ? ? childOb = !shallow && observe(newVal);
? ? ? ? // 重點看這里，這里是發(fā)布者發(fā)布數據變化的消息
? ? ? ? // dep通知所有依賴的watcher
? ? ? ? dep.notify();
? ? ? }
? ? });

? Dep.prototype.notify = function notify () {
? ? // stabilize the subscriber list first
? ? // subs就是上面get回調里，我們用來加入watcher依賴的數組
? ? var subs = this.subs.slice();?
? ? if (!config.async) {
? ? ? // subs aren't sorted in scheduler if not running async
? ? ? // we need to sort them now to make sure they fire in correct
? ? ? // order
? ? ? subs.sort(function (a, b) { return a.id - b.id; });
? ? }
? ? for (var i = 0, l = subs.length; i < l; i++) {
? ? // ?遍歷調用watcher的update方法
? ? ? subs[i].update();?
? ? }
? };

? // Dep的構造函數
? var Dep = function Dep () {
? ? this.id = uid++;
? ? this.subs = [];
? };
// ?取消訂閱
? Dep.prototype.removeSub = function removeSub (sub) {
? ? remove(this.subs, sub);
? };

// 移除deps數組里的不在newDeps里的老的依賴，將之前newDeps收集的dep依賴丟給this.deps
? Watcher.prototype.cleanupDeps = function cleanupDeps () {
? ? var i = this.deps.length;
? ? while (i--) {
? ? ? var dep = this.deps[i];
? ? ? if (!this.newDepIds.has(dep.id)) {
? ? ? ? dep.removeSub(this);
? ? ? }
? ? }
? ? var 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;
? };