vue源码解读-组件的render过程

目录导航

我们在之前分析_createElement的时候,曾经执行过这样一段逻辑


之前我们的render方法是这样的


这次我们的render方法是这样的


它(tag)接收一个组件对象,因此tag==‘string’不成立,走else,调用createComponent方法,入参如下


首先判断了Ctor是否存在,我们这里是一个组件对象,因此向下

当分析npm run build的时候,我们找到了entry-runtime-with-compiler文件,这是打包后的入口,我们又通过该文件对vue的引用一级一级去查找vue的定义,其中在src\core\index.js中我们调用了initGlobalAPI,而在该函数中,我们将vue挂载到了Vue.options._base上,即


因此,baseCtor和context一样,即Vue实例

接着调用Vue.extend方法


该方法在initGlobalAPI的时候被挂载至vue

在该方法中做了以下几件事

首先

    使用单例模式保证多次import得到的是同一个实例


    然后创建一个组件类并使其继承Vue并返回 


    这样就使得类Sub(即Ctor)拥有了和Vue一样的能力

代码向下,定义data={},并将其作为参数传递,执行installComponentHooks


该方法向data上挂载了hook


hook的值是


此时,data大概长这样


接着便开始生成vnode


Vnode入参如下


生成的vnode如下




那么,组件Vnode又是如何被转化为dom的呢?()

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Vue.js另一个核心思想是组件化。所谓组件化,就是把页面拆分成多个组件,每个组件依赖的CSS、JavaScrip...
    oWSQo阅读 3,593评论 1 1
  • 回忆 首先,render函数中手写h=>h(app),new Vue()实例初始化init()和原来一样。$mou...
    LoveBugs_King阅读 6,796评论 1 2
  • 当通过 crateComponent 创建了组件 VNode,接下来会走到 vm._update,执行 vm._u...
    阿畅_阅读 6,575评论 0 0
  • 第二次来梳理Vue源码逻辑了。第一次因为不熟悉,梳理的很细致才弄懂。第二次就更有大局观一些了,这次我主要抓住流程的...
    LoveBugs_King阅读 5,781评论 1 5
  • patch 当我们通过createComponent创建了组件VNode,接下来会走到vm._update,执行v...
    oWSQo阅读 3,502评论 0 2