认识

2024年03月15日

柏拉文

越努力，越幸运

一、认识

---

createApp() 用于创建一个应用实例, 第一个参数是根组件。第二个参数可选，它是要传递给根组件的 props。createApp 实际调用 ensureRenderer 先获取 baseCreateRenderer 渲染器函数, 并执行。 baseCreateRenderer 返回一个对象, 有 render、hydrate、createApp 方法。其中, createApp 执行的是 createApp 方法, 返回 App 实例。App 实例中提供了 config 上下文、 use 方法、mixin 方法、 component 方法、directive 方法、mount 方法、unmount 方法、provide 方法等。随后, 将原来的 mount 方法保存起来, 重写 mount 方法, 主要逻辑如下:

1. 获取 root DOM

2. 将 root DOM innerHTML 赋值给 app.component.template

3. 清空 root DOM innerHTML

4. 调用原来的 mount 方法

原来 mount 主要逻辑如下:

1. 创建根组件虚拟DOM

2. 调用 render 渲染器:

render 渲染器主要逻辑为: 接收虚拟DOM, 转化为真实 DOM, 挂载到 container。 render 方法首先调用 patch 函数, 根据 root vnode.type 类型走到了 processComponent 分支, 又因为是初始化, 走到了 mountComponent 方法中。

mountComponent 主要逻辑为:

1. 创建组件实例: 调用 createComponentInstance 创建组件实例

2. 组件实例安装: Vue2.0 组件实例安装, 调用 this._init 实例属性，方法初始化，数据响应式，两个生命周期的钩子、属性声明，响应式等等。Vue3.0 调用 setupComponent 进行组件实例安装, 初始化 props, 初始化 slots, setup 数据状态处理。

   1. 模版编译, 生成 render 函数: 调用 finishComponentSetup 开始进行模版编译, 如果有 Template , 编译模版, 生成 render 函数, 没有Template, 取 render

   2. 支持 Vue 2.0 选项式 API: finishComponentSetup 调用 applyOptions 来支持选项式 API, 其中, data 会通过 reactive 来实现响应式

3. 安装渲染函数副作用: Vue2 中的更新机制为 new Watcher(updateComponent), Vue3 的更新机制为 ReactiveEffect(componentUpdateFn, ()=> queueJob(update)), 调用 setupRenderEffect, 会将渲染函数封装成一个副作用函数,并立即执行，执行完毕界面渲染出现，当依赖的响应式数据发生变化时，会重新执行。 渲染函数主要逻辑为: 调用 render 函数, 获取组件 VNode, 过程中触发了副作用收集, 得到当前组件的子树, 继续调用 patch 向下递归创建。

4. 将 VNode 转化为真实 DOM, 挂载到宿主节点

二、细节

---