Vue组件化流程
2020-08-26 10:30:58 0 举报AI智能生成
Vue组件化流程思维导图
作者其他创作
大纲/内容
组件声明：Vue.component() 全局声明/局部声明
文件：src/core/global-api/assets.js
文件：src/core/global-api/assets.js
initAssetRegisters(Vue)组件注册使用extend方法
将配置转换为构造函数并添加到components选项
将配置转换为构造函数并添加到components选项
组件实例创建及挂载
生成渲染函数
生成渲染函数
创建组件VNode
updateComponent()执行render()函数
文件：src/core/instance/lifecycle.js
文件：src/core/instance/lifecycle.js
调用createElement()函数(相当于h函数)
文件：src/core/instance/render.js
文件：src/core/instance/render.js
兼容性处理
原始标签直接调用new VNode生成vnode
自定义组件调用createComponent()函数
文件：src/core/vdom/create-element.js
原始标签直接调用new VNode生成vnode
自定义组件调用createComponent()函数
文件：src/core/vdom/create-element.js
文件：src/core/vdom/create-component.js
返回自定义组件的vnode
installComponentHooks安装组件的钩子函数
init()组件初始化调用用（实例创建，挂载）
prepatch()打补丁之前调用
insert()被插入之后调用
destroy()被销毁的时候调用
创建组件实例
首次执行_update()时，patch()会通过createEle()创建根元素
core/vdom/patch.js
createEle()调用createComponent()自定义组件创建过程将vnode转换为dom插入元素
0 条评论
下一页
为你推荐
查看更多
