Vue之Watcher源码解析（2）

接着上节vue watcher源码的话，继续探讨，目前是这么个过程：

函数大概是这里：

// line-3846
  vue.prototype._render = function() {

    // 获取参数

    try {
      // 死在这儿
      vnode = render.call(vm._renderproxy, vm.$createelement);
    } catch (e) {
      // 报render错误
    }
    // return empty vnode in case the render function errored out
    if (!(vnode instanceof vnode)) {
      // 返回空节点
    }
    // set parent
    vnode.parent = _parentvnode;
    return vnode
  };

然后，在上个月，我卡死在了render.call这个函数上面，因为所有vue实例被设置了proxy代理，所以会跳转到各种奇怪的检测函数中。

过了一个月，我依然看不懂，一点都不想讲，所以先跳过，直接看后面！

这里假设vnode已经返回了，来看看是个啥：

这是一个虚拟节点，由之前字符串化后的dom树生成，主要包含子节点、上下文、属性、文本、标签名、类型等属性，这些可以直接从键名判断。

得到vnode后，由于这里是根节点，所以不存在_parentvnode，直接返回。

然后到了mountcomponent函数：

// line-2374
  function mountcomponent(vm, el, hydrating) {
    vm.$el = el;
    // error
    callhook(vm, 'beforemount');

    var updatecomponent;
    /* istanbul ignore if */
    if ("development" !== 'production' && config.performance && mark) {
      updatecomponent = function() {
        // 开发者模式下的处理方式
      };
    } else {
      // 重新进入这里
      updatecomponent = function() {
        vm._update(vm._render(), hydrating);
      };
    }

    vm._watcher = new watcher(vm, updatecomponent, noop);
    hydrating = false;

    // manually mounted instance, call mounted on self
    // mounted is called for render-created child components in its inserted hook
    if (vm.$vnode == null) {
      vm._ismounted = true;
      callhook(vm, 'mounted');
    }
    return vm
  }

这样，就带着返回的vode进入了_update函数，开始正式渲染页面。

函数如下：

// line-2374
  vue.prototype._update = function(vnode, hydrating) {
    var vm = this;
    if (vm._ismounted) {
      callhook(vm, 'beforeupdate');
    }
    // 保存原属性
    var prevel = vm.$el;
    var prevvnode = vm._vnode;
    var prevactiveinstance = activeinstance;
    activeinstance = vm;
    vm._vnode = vnode;
    // patch
    if (!prevvnode) {
      // 初始化渲染
      vm.$el = vm.__patch__(
        vm.$el, vnode, hydrating, false /* removeonly */ ,
        vm.$options._parentelm,
        vm.$options._refelm
      );
    } else {
      // 更新
      vm.$el = vm.__patch__(prevvnode, vnode);
    }
    activeinstance = prevactiveinstance;
    // update __vue__ reference
    if (prevel) {
      prevel.__vue__ = null;
    }
    if (vm.$el) {
      vm.$el.__vue__ = vm;
    }
    // if parent is an hoc, update its $el as well
    // hoc => high order component => 高阶组件
    if (vm.$vnode && vm.$parent && vm.$vnode === vm.$parent._vnode) {
      vm.$parent.$el = vm.$el;
    }
    // updated hook is called by the scheduler to ensure that children are
    // updated in a parent's updated hook.
  };

由于是初次渲染，所以会进入第一个条件分支，并调用__patch__函数，传入原生dom节点、虚拟dom、false三个参数。

__patch__在加载框架时候已经注入了，见代码：

  // line-7526
  // install platform patch function
  vue$3.prototype.__patch__ = inbrowser ? patch : noop;

  // line-6968
  var patch = createpatchfunction({
    nodeops: nodeops,
    modules: modules
  });

这里，nodeops为封装的dom操作操作方法，modules为属性、指令等相关方法。

这个createpatchfunction函数的构造相当于一个模块，里面包含大量的方法，但是最后不是返回一个对象包含内部方法的引用，而是返回一个函数，形式大概如下：

 // line-4762
  function createpatchfunction() {
    // fn1...
    // fn2...
    return function patch() {
      // 调用内部方法fn1,fn2...
    }
  }

方法比较多，下次再讲，边跑流程边看。

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