vue3 源码之初始化流程
2021-03-19 00:40:54 0 举报AI智能生成
登录查看完整内容
vue3源码初始化流程的思维导图
作者其他创作
大纲/内容
vue3 源码之初始化流程
creatApp()
文件位置：packages/runtime-dom/src/index.ts
直接在这里暴露一个creatApp实例，也就是我们在外面使用时调用的函数
ensureRenderer() 返回了一个渲染器 renderer
使用了一个单例模式
获取renderer，没有就创建
createRenderer()
文件位置：packages/runtime-core/src/renderer.ts
baseCreateRenderer => 返回的就是渲染器
redner：该函数将vnode转换为真实dom之后追加到指定容器上
hydrate：注水，应用于服务端渲染，ssr
createApp()：创建vue实例
createAppAPI()
文件位置：packages/runtime-core/src/apiCreateApp.ts
creatApp函数的工厂函数
工厂函数的实例方法
use()
mixin()
component()
directive()
mount() 挂载
创建初始的vnode
调用render函数
unmount()
patch()
根据节点类型做不同的处理
初始化的时候是processComponent()
老节点没有则执行挂载mountComponent
如果有老节点，则执行更新updateComponent
mountComponent()
创建根组件实例
setupComponent组件初始化
文件位置：packages/runtime-core/src/component.ts
初始化属性initProps
初始化插槽initSlots
setupStatefulComponent
new Proxy代理响应式数据
实现setup函数setupResult
处理setup结果
finishComponentSetup解析用户传递的options选项，兼容vue2的api
安装渲染函数副作用setupRenderEffect
如果组件依赖的响应式数据变化，组件就会重新渲染
把前面得到的vnode，patch为真实dom
如果已经创建过则直接执行diff
0 条评论
回复 删除
下一页
