当一个模板中有组件节点时，组件节点是如何被渲染的
2022-05-07 17:55:58 1 举报
登录查看完整内容
讲解了 Vue 中组件节点从声明到渲染DOM的一个大致过程
作者其他创作
大纲/内容
创建组件占位节点（但是带有了组件信息，比如该组件的构造器，父组件传入的数据等）
抽象组件的处理，现在还没看懂，先放这（应该要看一下官方的文档）
createComponent（patch中修改真实DOM的方法）
检查组件的 DOM节点是否存在，如果存在则调用组件默认的 prepatch 回调
继续更新主模板中的内容
解析 Props ，获取绑定事件
Render 函数
解析你写的模板为AST树
利用 patch 算法进行 DOM 的更新
调用组件默认携带的 init 回调函数
调用 $ mount 方法，进行组件节点内容的 DOM 修改
__patch__
返回这个占位节点
讲解结束
是异步组件
利用在[[--createComponent (创建虚拟DOM使用的方法)--]]阶段创建的带有解析信息的占位节点，利用其中的解析信息创建该节点所需要的配置信息
init回调
代码位置在 core/vdom/create-component.js
判断是否是异步节点，如果是，且无法得到异步组件的构造器，返回一个占位符节点
为组件节点安装一些默认的组件Hook （这里非常重要）
如果没有创建组件虚拟DOM节点，则创建组件DOM节点（调用createComponentInstanceForVNode 方法）
其中包含了该组件节点的展位节点，还有父组件的vm实例
在这个函数中，真正的创建了组件模板对应的虚拟DOM树
当前模板虚拟DOM树渲染完成
源代码：return new vnode.componentOptions.Ctor(options)这里的 Ctor 其实是类似 Vue 的一个函数，做的事情也是一样的，但是会对vm实例设置你在组件模板中写的 data， methods 这些属性
返回虚拟DOM树
insert
__patch__ 到组件节点，createElm 中调用createComponent 方法
createComponentInstanceForVNode
不是异步组件
之后判断组节点在使用中是否使用了 inline-template 属性，如果使用了则解析内部HTML模板作为渲染内容
解析组件的构造器配置
猜测跟 keep-alivereactivateComponent
如果 组件节点 vm 实例存在，则进行下面的操作
返回 vm 实例
initComponent
这部分与 组件节点的DOM的挂载之后的事情，先不细讲
调用在 [[--createComponent (创建虚拟DOM使用的方法)--]]阶段生成的组件构造器，生成组件模板对应的虚拟DOM树，并返回组件节点的vm实例
遇到组件节点，调用 createElement 函数创建虚拟DOM
将 v-model 指令中数据，事件放入组件实例的 data， events 属性中
createComponent (创建虚拟DOM使用的方法)
将AST树翻译为Render函数代码
在这里组件节点里的内容，真的渲染进了 DOM 树里，在组件节点渲染完毕后，会返回继续渲染总模板中后续的内容
当一个模板中有组件节点时，组件节点是如何被渲染的
识别到当前节点为组件节点，调用 createComponent 函数创建组件的虚拟DOM节点
new Vue(options)
将组件的构造器继承Vue函数（简单来讲，组件构造器是子类，Vue函数是父类，具体内容不在这里赘述）
收藏
0 条评论
回复 删除
下一页
