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的呢?()