Vue之Watcher源码解析2

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

函数大概是这里：

rush:js;"> // line-3846 Vue.prototype._render = function() {

// <a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>参数

try {
  // 死<a href="https://www.jb51.cc/tag/zaizhe/" target="_blank" class="keywords">在这</a>儿
  vnode = render.call(vm._renderProxy,vm.$createElement);
} catch (e) {
  // 报render<a href="https://www.jb51.cc/tag/cuowu/" target="_blank" class="keywords">错误</a>
}
// 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函数：

rush:js;"> // line-2374 function mountComponent(vm,el,hydrating) { vm.$el = el; // error 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) {
  updateComponent = function() {
    // 开发者模式下的处理方式
  };
} else {
  // 重新进入这里
  updateComponent = function() {
    vm._update(vm._render(),hyd<a href="https://www.jb51.cc/tag/rating/" target="_blank" class="keywords">rating</a>);
  };
}

vm._watcher = new Watcher(vm,updateComponent,noop);
hyd<a href="https://www.jb51.cc/tag/rating/" target="_blank" class="keywords">rating</a> = 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函数，开始正式渲染页面。

函数如下：

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__在加载框架时候已经注入了，见代码：

rush:js;"> // 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函数的构造相当于一个模块，里面包含大量的方法，但是最后不是返回一个对象包含内部方法的引用，而是返回一个函数，形式大概如下：

rush:js;"> // line-4762 function createPatchFunction() { // fn1... // fn2... return function patch() { // 调用内部方法fn1,fn2... } }

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

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

Vue之Watcher源码解析2

相关推荐