vue3源码阅读【runtime-core\src\vnode.ts 】【createVNode】

很简单的人

已于 2022-07-27 16:47:44 修改

阅读量249

点赞数

分类专栏： runtime-core\src\vnode.ts vue3源码文章标签：前端 javascript vue.js

于 2022-07-18 16:56:15 首次发布

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

版权

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

18 篇文章 1 订阅

订阅专栏

runtime-core\src\vnode.ts

1 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了Vue.js中创建虚拟DOM节点（VNode）的过程。通过`createVNode`函数，将根组件和属性分别存储在VNode的`type`和`props`字段中。博客深入探讨了VNode的构造，包括类型标志编码、属性处理以及不同类型的组件识别。此外，还展示了如何使用`createBaseVNode`创建基础的VNode实例。

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

createVNode

定义 vnode 模板对象，然后将根组件 rootComponent 存入 vnode.type；将 rootProps 存入 vnode.props

const vnode = createVNode(
  rootComponent as ConcreteComponent,
     rootProps
   )

export const createVNode = (
  __DEV__ ? createVNodeWithArgsTransform : _createVNode
) as typeof _createVNode

function _createVNode(
  type: VNodeTypes | ClassComponent | typeof NULL_DYNAMIC_COMPONENT,
  props: (Data & VNodeProps) | null = null,
  children: unknown = null,
  patchFlag: number = 0,
  dynamicProps: string[] | null = null,
  isBlockNode = false
): VNode {
  ...
  ...

  // encode the vnode type information into a bitmap
  const shapeFlag = isString(type)
    ? ShapeFlags.ELEMENT
    : __FEATURE_SUSPENSE__ && isSuspense(type)
    ? ShapeFlags.SUSPENSE
    : isTeleport(type)
    ? ShapeFlags.TELEPORT
    : isObject(type)
    ? ShapeFlags.STATEFUL_COMPONENT
    : isFunction(type)
    ? ShapeFlags.FUNCTIONAL_COMPONENT
    : 0

  return createBaseVNode(
    type,
    props,
    children,
    patchFlag,
    dynamicProps,
    shapeFlag,
    isBlockNode,
    true
  )
}

function createBaseVNode(
  type: VNodeTypes | ClassComponent | typeof NULL_DYNAMIC_COMPONENT,
  props: (Data & VNodeProps) | null = null,
  children: unknown = null,
  patchFlag = 0,
  dynamicProps: string[] | null = null,
  shapeFlag = type === Fragment ? 0 : ShapeFlags.ELEMENT,
  isBlockNode = false,
  needFullChildrenNormalization = false
) {
  const vnode = {
    __v_isVNode: true,
    __v_skip: true,
    type,
    props,
    key: props && normalizeKey(props),
    ref: props && normalizeRef(props),
    scopeId: currentScopeId,
    slotScopeIds: null,
    children,
    component: null,
    suspense: null,
    ssContent: null,
    ssFallback: null,
    dirs: null,
    transition: null,
    el: null,
    anchor: null,
    target: null,
    targetAnchor: null,
    staticCount: 0,
    shapeFlag,
    patchFlag,
    dynamicProps,
    dynamicChildren: null,
    appContext: null
  } as VNode
...
...
  return vnode
}