vue3源码阅读【runtime-core\src\renderer.ts】【mountComponent】

最新推荐文章于 2024-07-09 15:39:24 发布

很简单的人

最新推荐文章于 2024-07-09 15:39:24 发布

阅读量209

点赞数

分类专栏： runtime-core\src\renderer.ts vue3源码文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/qq_38862234/article/details/125856050

版权

vue3源码同时被 2 个专栏收录

18 篇文章 1 订阅

订阅专栏

runtime-core\src\renderer.ts

4 篇文章 0 订阅

订阅专栏

本文详细解析了Vue.js中`mountComponent`函数的执行过程，包括创建组件实例、设置组件属性和渲染效果。在挂载过程中，首先检查是否为兼容模式并创建组件实例，然后执行`setupComponent`配置props、slots等，最后通过`setupRenderEffect`来设置渲染效果。此过程涉及到Vue的异步处理和 Suspense 特性。

摘要由CSDN通过智能技术生成

mountComponent

执行 createComponentInstance ，将 vnode 封装，生成 instance 实例
执行 setupComponent 设置组件实例instance的props、slots、setup、prosy等
执行 setupRenderEffect ，设置组件实例instance的effect

const mountComponent: MountComponentFn = (
    initialVNode,
    container,
    anchor,
    parentComponent,
    parentSuspense,
    isSVG,
    optimized
  ) => {
    // 2.x compat may pre-create the component instance before actually
    // mounting
    const compatMountInstance =
      __COMPAT__ && initialVNode.isCompatRoot && initialVNode.component
    const instance: ComponentInternalInstance =
      compatMountInstance ||
      (initialVNode.component = createComponentInstance(
        initialVNode,
        parentComponent,
        parentSuspense
      ))
...
...
    setupComponent(instance)


    // setup() is async. This component relies on async logic to be resolved
    // before proceeding
    if (__FEATURE_SUSPENSE__ && instance.asyncDep) {
      parentSuspense && parentSuspense.registerDep(instance, setupRenderEffect)

      // Give it a placeholder if this is not hydration
      // TODO handle self-defined fallback
      if (!initialVNode.el) {
        const placeholder = (instance.subTree = createVNode(Comment))
        processCommentNode(null, placeholder, container!, anchor)
      }
      return
    }

    setupRenderEffect(
      instance,
      initialVNode,
      container,
      anchor,
      parentSuspense,
      isSVG,
      optimized
    )

    if (__DEV__) {
      popWarningContext()
      endMeasure(instance, `mount`)
    }
  }