Vue之Watcher源码解析(2)

前端之家收集整理的这篇文章主要介绍了Vue之Watcher源码解析(2)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

函数大概是这里:

// <a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>参数 try { // 死在这儿 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函数

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函数,开始正式渲染页面

函数如下:

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-6968
var patch = createPatchFunction({
nodeOps: nodeOps,modules: modules
});

这里,nodeOps为封装的DOM操作操作方法,modules为属性、指令等相关方法

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

调用内部方法fn1,fn2... } }

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

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

原文链接:https://www.f2er.com/vue/37736.html

猜你在找的Vue相关文章