vue组件化流程
2022-04-15 18:19:13 21 举报AI智能生成
vue组件化过程
作者其他创作
大纲/内容
组件声明：Vue.component() <br>全局声明/局部声明
src/core/global-api/assets.js<br>
<font color="#f1753f">initAssetRegisters(Vue) </font> 组件注册使⽤extend⽅法<br><br>将配置转换为<font color="#f15a23">构造函数</font>并添加到components选项
组件实例创建及挂载<br>生成渲染函数<br>
创建组件VNode
src/core/instance/lifecycle.js
updateComponent() 执行 render() 函数<br>
src/core/instance/render.js<br>
调用createElement()函数 ( 相当于<font color="#f1753f">h</font>函数 ）
src/core/vdom/create-element.js
兼容性处理<br>原始标签直接调用new VNode生成vnode<br>自定义组件调用<font color="#f15a23">createComponent()</font>函数<br>
src/core/vdom/create-component.js
返回自定义组件的vnode
installComponentHooks 安装组件的钩子函数
init() 组件初始化调用（实例创建，挂载）
prepatch() 打补丁之前调用
insert() 被插入之后调用
destroy() 被摧毁的时候调用
创建组件实例<br>
⾸次执⾏_update()时，patch()会通过createEle()创建根元素
core/vdom/patch.js
createEle() 调用 createComponent()<font color="#f1753f"> </font><font color="#000000">自定义组件创建过程</font><font color="#f1753f"> 将vnode转换为dom </font><font color="#000000">插入元素</font><br>
0 条评论
下一页
