Vue之Watcher源码解析1

上一节最后再次调用了mount函数，我发现竟然跳到了7000多行的那个函数，之前我还说因为声明早了被覆盖，看来我错了！

就是这个函数：

rush:js;"> // Line-7531 Vue$3.prototype.$mount = function(el,hydrating) { el = el && inbrowser ? query(el) : undefined; return mountComponent(this,el,hydrating) };

第一步query就不用看了，el此时是一个DOM节点，所以直接返回，然后调用了mountComponent函数。

rush:js;"> // Line-2375 function mountComponent(vm,hydrating) { vm.$el = el; /* 检测vm.$options.render */

// <a href="https://www.jb51.cc/tag/diaoyong/" target="_blank" class="keywords">调用</a><a href="https://www.jb51.cc/tag/gouzihanshu/" target="_blank" class="keywords">钩子函数</a>
callHook(vm,'beforeMount');

var updateComponent;
/* istanbul ig<a href="https://www.jb51.cc/tag/nor/" target="_blank" class="keywords">nor</a>e if */
if ("development" !== 'production' && con<a href="https://www.jb51.cc/tag/fig/" target="_blank" class="keywords">fig</a>.performance && mark) {
  /* <a href="https://www.jb51.cc/tag/biaoji/" target="_blank" class="keywords">标记</a>vue-perf */
} else {
  updateComponent = function() {
    vm._update(vm._render(),hyd<a href="https://www.jb51.cc/tag/rating/" target="_blank" class="keywords">rating</a>);
  };
}

// <a href="https://www.jb51.cc/tag/shengcheng/" target="_blank" class="keywords">生成</a>中间件watcher
vm._watcher = new Watcher(vm,updateComponent,noop);
hyd<a href="https://www.jb51.cc/tag/rating/" target="_blank" class="keywords">rating</a> = false;

// <a href="https://www.jb51.cc/tag/diaoyong/" target="_blank" class="keywords">调用</a>最后<a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a><a href="https://www.jb51.cc/tag/gouzihanshu/" target="_blank" class="keywords">钩子函数</a>
if (vm.$vnode == null) {
  vm._isMounted = true;
  callHook(vm,'mounted');
}
return vm

}

这个函数做了三件事，调用beforeMount钩子函数，生成Watcher对象，接着调用mounted钩子函数。

数据双绑、AST对象处理完后，这里的Watcher对象负责将两者联系到一起，上一张网上的图片：

可以看到，之前以前把所有的组件都过了一遍，目前就剩一个Watcher了。

构造新的Watcher对象传了3个参数，当前vue实例、updateComponent函数、空函数。

rush:js;"> // Line-2697 var Watcher = function Watcher(vm,expOrFn,cb,options) { this.vm = vm; // 当前Watcher添加到vue实例上 vm._watchers.push(this); // 参数配置 默认为false if (options) { this.deep = !!options.deep; this.user = !!options.user; this.lazy = !!options.lazy; this.sync = !!options.sync; } else { this.deep = this.user = this.lazy = this.sync = false; } this.cb = cb; this.id = ++uid$2; this.active = true; this.dirty = this.lazy; // for lazy watchers this.deps = []; this.newDeps = []; // 内容不可重复的数组对象 this.depIds = new _Set(); this.newDepIds = new _Set(); // 把函数变成字符串形式` this.expression = expOrFn.toString(); // parse expression for getter if (typeof expOrFn === 'function') { this.getter = expOrFn; } else { this.getter = parsePath(expOrFn); if (!this.getter) { this.getter = function() {}; "development" !== 'production' && warn( "Failed watching path: \"" + expOrFn + "\" " + 'Watcher only accepts simple dot-delimited paths. ' + 'For full control,use a function instead.',vm ); } } // 不是懒加载类型调用get this.value = this.lazy ? undefined : this.get(); };

该构造函数添加了一堆属性，第二个参数由于是函数，直接作为getter属性加到watcher上，将字符串后则作为expression属性。

最后有一个value属性，由于lazy为false，调用原型函数gei进行赋值：

<div class="jb51code">
<pre class="brush:js;">
// Line-2746
Watcher.prototype.get = function get() {
pushTarget(this);
var value;
var vm = this.vm;
if (this.user) {
try {
value = this.getter.call(vm,vm);
} catch (e) {
handleError(e,vm,("getter for watcher \"" + (this.expression) + "\""));
}
} else {
// 调用之前的updateComponent
value = this.getter.call(vm,vm);
}
// "touch" every property so they are all tracked as
// dependencies for deep watching
if (this.deep) {
traverse(value);
}
popTarget();
this.cleanupDeps();
return value
};

// Line-750
Dep.target = null;
var targetStack = [];

function pushTarget(_target) {
// 默认为null
if (Dep.target) {
targetStack.push(Dep.target);
}
// 依赖目前标记为当前watcher
Dep.target = _target;
}

function popTarget() {
Dep.target = targetStack.pop();
}