学习完成响应式系统后，咋们来看看vue3组件的初始化流程

既然是看vue组件的初始化流程，咋们先来创建基本的代码，跑跑流程

（在app.vue中写入以下内容，来跑流程）

import { h, ref } from "vue";
export default {
  name: 'App',
  setup() {
    const count = ref(0);
    return {
      count
    };
  },
  render() {
    return h('div', { pId: '"helloWorld"' }, [
      h('p', {}, 'hello world'),
      h('p', {}, `count的值是： ${this.count}`),
    ])
  }
}

createApp

咋们在一开始调用createApp会发生什么事情呢？看下图:

在createApp 主要会发生这些事情：

在外部调用createApp 的时候，在函数内部会调用ensureRenderer()这个函数

在ensureRenderer 这个函数中,判断renderer是否存在，不存在则创建，并且传入一系列的api去初始化

function ensureRenderer() {
  // 如果 renderer 有值的话，那么以后都不会初始化了
  return (
    renderer ||
    (renderer = createRenderer({
      // 创建dom节点,div,li,等
      createElement,
      // 创建文本节点
      createText,
      // 给文本节点设置文本  node.nodeValue = text
      setText,
      //给dom设置文本 el.textContent = text;
      setElementText,
      // 对比更新属性方法
      patchProp,
      // 节点插入方法 parent.insertBefore(child, anchor)
      insert,
      // 移除节点 parent.removeChild(child);
      remove,
      ...
    }))
  );
}

在 createRenderer 中会直接调用 createAppAPI 这个方法，并且返回一个对象{createApp: createAppAPI(render)}

最后在 createAppAPI 中调用 createApp 方法并且拓展了一个mount方法

export function createAppAPI(render) {
  return function createApp(rootComponent) {
    const app = {
      _component: rootComponent,
      mount(rootContainer) {
        const vnode = createVNode(rootComponent);
        // 调用 createAPI 里面传入的render方法
        render(vnode, rootContainer);
      },
    };
    return app;
  };
}

请注意图中有好几处方法的名称都是 createApp, 每一处的createApp的作用是不一样的，这里不是递归调用哦！

具体流程如下图

上图是整个mount阶段和更新阶段都会经过流程了，是不是感觉有一丢丢的小复杂😆😆😆

接下来咋们就单重我们代码的执行角度来分析下mount流程

mount

咋们把所有的update的去掉，他就是mount阶段了。

1.在上面createApp的阶段后,咋们就能获取到rootCompontent，rootComponent是整个APP.js 导出的一个对象,rootContainer 则是需要挂载的真实dom节点；

2.调用createVNode创建虚拟节点；

3.拿到虚拟节点后，调用 render(vnode)；

4.在render中直接调用patch(null, vnode, container)方法，并传入对应的参数；

5.传入的 APP.js 是一个组件，走组件处理逻辑并传入对应的参数processComponent(n1, n2, container, parentComponent)；

6.由于传入的参数n1为null,那么进入组件的mount逻辑并传入对应的参数mountComponent(n2, container, parentComponent);；

7.在 mountComponent 中需要经过三层处理，把组件渲染为 render函数和对render函数进行依赖收集

7.1 创建组件的实例

7.2 初始化组件的内容，在初始化组件内容中，会对组件的props,slots 等绑定到instance当中

。7.2.1 在instance上面绑定props

。7.2.2 在instance上面绑定slots

。7.2.3 调用setupStatefulComponent给instance上面绑定其他的内容，并且把组件转成render函数

。•7.2.3.1 由于咋们App.js中是传了 setup函数的，所以接下来走setup的流程,调用 createSetupContext(instance)对setup设置上下文

。•7.2.3.2 setup && setup(shallowReadonly(instance.props), setupContext) 传入参数执行setup函数并且获得setup函数的执行结果

。•7.2.3.3 调用handleSetupResult(instance, setupResult)根据 setup函数的返回结果来做对应的事情

。•7.2.3.4 由于咋们的的setup返回的结果是一个object，所以给当前组件的instance.setupState= proxyRef(setupResult)， proxyRefs 的作用就是把 setupResult 对象做一层代理,方便用户直接访问 ref 类型的值

。•7.2.4 咋们的APP.js到目前位置都还没有render函数，调用 finishComponentSetup(instance); 完成组件的setup操作，给实例赋值 render函数

。•7.2.4.1 由于咋们组件是传了render函数的，所以直接把组件的render函数赋值给instance

在这里咋们可以看到，组件的render函数的优先级是高于template的，只有组件里面没有写render函数，还会去编译模板里面的内容，并且放到组件中作为render函数

。7.2.5 上面7.2.4 主要就是为了给组件实例赋值好render函数，有了render函数，那么就需要来进行依赖收集啦!!! 调用 setupRenderEffect(instance, initialVNode, container) 来进行依赖收集

。•7.2.5.1 effect方法还记得吧😄😁😃有不明白的请看这里, 给实例赋值上一个update方法，方便后续的依赖trigger，在effect当中，会默认执行一次 fn；

instance.update = effect(componentUpdateFn, {
      scheduler: () => {
        // 把 effect 推到微任务的时候在执行
        // queueJob(effect);
        queueJob(instance.update);
      },
    });