Vue之Watcher源码解析（1）

发布时间：2020-12-17 02:52:24 所属栏目：百科来源：网络整理

导读：上一节最后再次调用了mount函数，我发现竟然跳到了7000多行的那个函数，之前我还说因为声明早了被覆盖，看来我错了！就是这个函数：第一步query就不用看了，el此时是一个DOM节点，所以直接返回，然后调用了mountComponent函数。 // 调用钩子函数callHook(v

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

就是这个函数：

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

// 调用钩子函数
callHook(vm,'beforeMount');

var updateComponent;
/* istanbul ignore if */
if ("development" !== 'production' && config.performance && mark) {
  /* 标记vue-perf */
} else {
  updateComponent = function() {
    vm._update(vm._render(),hydrating);
  };
}

// 生成中间件watcher
vm._watcher = new Watcher(vm,updateComponent,noop);
hydrating = false;

// 调用最后一个钩子函数
if (vm.$vnode == null) {
  vm._isMounted = true;
  callHook(vm,'mounted');
}
return vm

}

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

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

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

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

该构造函数添加了一堆属性，第二个参数由于是函数，直接作为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();
}

原型方法get中，先设置了依赖收集数组Dep的target值，user属性暂时不清楚意思，跳到了else分支，调用了getter函数。而getter就是之前的updateComponent函数：

这个函数不接受参数，所以说传进来的两个vm并没有什么卵用，调用这个函数会接着调用_update函数，这个是挂载到vue原型的方法：

方法获取了一些vue实例的参数，比较重点的是render函数，调用了之前字符串后的ast对象：

在这里有点不一样的地方，接下来的跳转有点蒙，下节再说。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!