当前位置： 移动技术网 > IT编程>脚本编程>vue.js > Vue之Watcher源码解析（1）

Vue之Watcher源码解析（1）

2017年12月12日  | 移动技术网IT编程  | 我要评论

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

就是这个函数：

// line-7531
  vue$3.prototype.$mount = function(el, hydrating) {
    el = el && inbrowser ? query(el) : undefined;
    return mountcomponent(this, el, hydrating)
  };

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

// line-2375
  function mountcomponent(vm, el, hydrating) {
    vm.$el = el;
    /* 检测vm.$options.render */

    // 调用钩子函数
    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函数、空函数。

// 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进行赋值：

// 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函数：

// line-2422
  updatecomponent = function() {
    vm._update(vm._render(), hydrating);
  };

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

// line-2422
  vue.prototype._render = function() {
    var vm = this;
    var ref = vm.$options;
    var render = ref.render;
    var staticrenderfns = ref.staticrenderfns;
    var _parentvnode = ref._parentvnode;
    // 检测是否已挂载
    if (vm._ismounted) {
      // clone slot nodes on re-renders
      for (var key in vm.$slots) {
        vm.$slots[key] = clonevnodes(vm.$slots[key]);
      }
    }
    // 都没有
    vm.$scopedslots = (_parentvnode && _parentvnode.data.scopedslots) || emptyobject;
    if (staticrenderfns && !vm._statictrees) {
      vm._statictrees = [];
    }
    vm.$vnode = _parentvnode;
    // render self
    var vnode;
    try {
      // 调用之前的render字符串函数
      vnode = render.call(vm._renderproxy, vm.$createelement);
    } catch (e) {
      /* handler error */
    }
    // return empty vnode in case the render function errored out
    if (!(vnode instanceof vnode)) {
      /* 报错 */
      vnode = createemptyvnode();
    }
    // set parent
    vnode.parent = _parentvnode;
    return vnode
  };

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网