Skip to content

render

  • render /packages/runtime-core/src/renderer.ts
js
  // 传入三个参数, vnode,挂载的真实dom节点,命名空间
  const render: RootRenderFunction = (vnode, container, namespace) => {
    if (vnode == null) {
    // 如果没有传入vnode,并且container已经挂载了vnode,就先卸载之前的vnode
      if (container._vnode) {
        unmount(container._vnode, null, null, true)
      }
    } else {
      // 上树
      patch(
        container._vnode || null,
        vnode,
        container,
        null,
        null,
        null,
        namespace,
      )
    }
    // 暂时不清楚作用,后面研究
    if (!isFlushing) {
      isFlushing = true
      flushPreFlushCbs()
      flushPostFlushCbs()
      isFlushing = false
    }
    container._vnode = vnode
  }
  • patch /packages/runtime-core/src/renderer.ts
js
  type PatchFn = (
    n1: VNode | null, // null means this is a mount
    n2: VNode,
    container: RendererElement,
    anchor?: RendererNode | null,
    parentComponent?: ComponentInternalInstance | null,
    parentSuspense?: SuspenseBoundary | null,
    namespace?: ElementNamespace,
    slotScopeIds?: string[] | null,
    optimized?: boolean,
) => void