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

2020-12-18  本文已影响0人  习惯水文的前端苏

目录导航

我们在之前分析_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的呢?()

上一篇下一篇

猜你喜欢

热点阅读