Vue源码学习(二)——createVnode

已于 2023-12-14 15:08:37 修改
阅读量1.6k 收藏
点赞数 1
文章标签： 学习
于 2023-12-14 15:05:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74793405/article/details/134994215
版权

上文说到createApp(App).mount(rootContainer) mount方法的核心就是通过createVnode创建虚拟节点，并且基于vnode调用render函数，我们先从createVnode开始了解

目录

1.createVnode

1.1 creteBaseVnode

2.render函数

3.patch函数

3.1 processComponent

3.2 mountComponent

1.createVnode

createVNode方法主要功能就是创造虚拟dom，并且它会根据传过来的rootComponent不同情况打上shapFlag标签，createVnode核心就是调用createBaseVNode，以及在调用createBaseVnode之前根据type的类型打上不同的shapFlag  (shapFlag就是通过位运算标记信号，可以快速辨别组件的类型---一种性能优化手段)

个人认为这是我们可以从源码中学习的关键部分---如果采用isObject，typeof后续每个组件都要进行判断，而采用shapFlag可以直接明确是什么类型（相对于数组，map区分类型而言他们只是一串数字大大提升性能）

const vnode = createVNode(rootComponent, rootProps)


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 {
  if (!type || type === NULL_DYNAMIC_COMPONENT) {
    if (__DEV__ && !type) {
      warn(`Invalid vnode type when creating vnode: ${type}.`)
    }
    type = Comment
  }
    
  //是否是Vnode
  if (isVNode(type)) {
    // createVNode receiving an existing vnode. This happens in cases like
    // <component :is="vnode"/>
    // #2078 make sure to merge refs during the clone instead of overwriting it
    const cloned = cloneVNode(type, props, true /* mergeRef: true */)
    if (children) {
      normalizeChildren(cloned, children)
    }
    if (isBlockTreeEnabled > 0 && !isBlockNode && currentBlock) {
      if (cloned.shapeFlag & ShapeFlags.COMPONENT) {
        currentBlock[currentBlock.indexOf(type)] = cloned
      } else {
        currentBlock.push(cloned)
      }
    }
    cloned.patchFlag |= PatchFlags.BAIL
    return cloned
  }

  // class component normalization.
  if (isClassComponent(type)) {
    type = type.__vccOpts
  }

  // 2.x async/functional component compat
  if (__COMPAT__) {
    type = convertLegacyComponent(type, currentRenderingInstance)
  }


  // class & style normalization.
  if (props) {
    // for reactive or proxy objects, we need to clone it to enable mutation.
    props = guardReactiveProps(props)!
    let { class: klass, style } = props
    if (klass && !isString(klass)) {
      props.class = normalizeClass(klass)
    }
    if (isObject(style)) {
      // reactive state objects need to be cloned since they are likely to be
      // mutated
      if (isProxy(style) && !isArray(style)) {
        style = extend({}, style)
      }
      props.style = normalizeStyle(style)
    }
  }

  // encode the vnode type information into a bitmap
  // 根据type类型，修改shapeFlage值
  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

  if (__DEV__ && shapeFlag & ShapeFlags.STATEFUL_COMPONENT && isProxy(type)) {
    type = toRaw(type)
    warn(
      `Vue received a Component which was made a reactive object. This can ` +
      `lead to unnecessary performance overhead, and should be avoided by ` +
      `marking the component with \`markRaw\` or using \`shallowRef\` ` +
      `instead of \`ref\`.`,
      `\nComponent that was made reactive: `,
      type
    )
  }

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

1.1 creteBaseVnode

 基于createVnode真正的创建虚拟节点，并且同样根据children的类型打上不同shapFlag

// 基于createVNode  创建基本节点
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,
    ctx: currentRenderingInstance
  } as VNode

  if (needFullChildrenNormalization) {
    normalizeChildren(vnode, children)
    // normalize suspense children
    if (__FEATURE_SUSPENSE__ && shapeFlag & ShapeFlags.SUSPENSE) {
      ; (type as typeof SuspenseImpl).normalize(vnode)
    }
  } else if (children) {

    // 基于 children 更改 shapeFlag---利用位运算进行逻辑处理
    // 例子:0001 代表element 元素  ARRAY_CHILDREN 16 1 0000
    //      0001 | 10000=10001  ==>17 
    //     element+ARRAY_CHILDREN 代表该元素子元素是数组，本事是elemnt
    // compiled element vnode - if children is passed, only possible types are
    // string or Array.
    vnode.shapeFlag |= isString(children)
      ? ShapeFlags.TEXT_CHILDREN
      : ShapeFlags.ARRAY_CHILDREN
  }

  // validate key
  if (__DEV__ && vnode.key !== vnode.key) {
    warn(`VNode created with invalid key (NaN). VNode type:`, vnode.type)
  }

  // track vnode for block tree
  if (
    isBlockTreeEnabled > 0 &&
    // avoid a block node from tracking itself
    !isBlockNode &&
    // has current parent block
    currentBlock &&
    // presence of a patch flag indicates this node needs patching on updates.
    // component nodes also should always be patched, because even if the
    // component doesn't need to update, it needs to persist the instance on to
    // the next vnode so that it can be properly unmounted later.
    (vnode.patchFlag > 0 || shapeFlag & ShapeFlags.COMPONENT) &&
    // the EVENTS flag is only for hydration and if it is the only flag, the
    // vnode should not be considered dynamic due to handler caching.
    vnode.patchFlag !== PatchFlags.HYDRATE_EVENTS
  ) {
    currentBlock.push(vnode)
  }

  if (__COMPAT__) {
    convertLegacyVModelProps(vnode)
    defineLegacyVNodeProperties(vnode)
  }

  return vnode
}

2.render函数

在mount的核心中除了通过createVnode创建虚拟节点外，同样基于vnode调用render函数，

而render函数正是之前baseCreateRender返回render，因此我们回到baseCreateRender看一下render函数，它的核心就是调用patch函数（最关键的地方）进行第一次初始化的上树

 // 调用render函数，基于vnode 进行开箱
 render(vnode, rootContainer, isSVG)
 //baseCreateRender
  return {
    render,
    hydrate,
    createApp: createAppAPI(render, hydrate)
  }
 // render  ---调用patch
  const render: RootRenderFunction = (vnode, container, isSVG) => {
    if (vnode == null) {
      if (container._vnode) {
        unmount(container._vnode, null, null, true)
      }
    } else {
      // 调用 patch 
      patch(container._vnode || null, vnode, container, null, null, null, isSVG)
    }
    flushPreFlushCbs()
    flushPostFlushCbs()
    container._vnode = vnode
  }

3.patch函数

   主要就是判断老节点和新节点是否一样，不一样则卸载老节点，根据新节点的类型进行不同的处理

我们从头开始并没有老节点，因此只需要根据新节点的类型进行不同处理即可,vue会根据你之前创建的节点的shapeFlag进行处理，一般来说我们初始化此时应该传入的是一个组件，我们就从 processComponent入手

  const patch: PatchFn = (
    n1,
    n2,
    container,
    anchor = null,
    parentComponent = null,
    parentSuspense = null,
    isSVG = false,
    slotScopeIds = null,
    optimized = __DEV__ && isHmrUpdating ? false : !!n2.dynamicChildren
  ) => {
    // 1.新节点与老节点完全一样
    if (n1 === n2) {
      return
    }

    // 2.新节点和老节点不是同一个类型--(需要老节点存在)
    //   新老节点type和key是否一样
    //   卸载n1老节点，并将n1置为空
    // patching & not same type, unmount old tree
    if (n1 && !isSameVNodeType(n1, n2)) {
      anchor = getNextHostNode(n1)
      unmount(n1, parentComponent, parentSuspense, true)
      n1 = null
    }

    if (n2.patchFlag === PatchFlags.BAIL) {
      optimized = false
      n2.dynamicChildren = null
    }
    // 基于 n2 的类型来判断
    // 因为 n2 是新的 vnode
    const { type, ref, shapeFlag } = n2
    switch (type) {
      // 1.对于文字处理:直接向容器内追加文本节点
      case Text:
        processText(n1, n2, container, anchor)
        break
      case Comment:
        processCommentNode(n1, n2, container, anchor)
        break
      case Static:
        if (n1 == null) {
          mountStaticNode(n2, container, anchor, isSVG)
        } else if (__DEV__) {
          patchStaticNode(n1, n2, container, isSVG)
        }
        break
      case Fragment:
        processFragment(
          n1,
          n2,
          container,
          anchor,
          parentComponent,
          parentSuspense,
          isSVG,
          slotScopeIds,
          optimized
        )
        break
      default:
        // 这里就基于 shapeFlag 来处理---采用位运算
        if (shapeFlag & ShapeFlags.ELEMENT) {
          // 处理element
          processElement(
            n1,
            n2,
            container,
            anchor,
            parentComponent,
            parentSuspense,
            isSVG,
            slotScopeIds,
            optimized
          )
        } else if (shapeFlag & ShapeFlags.COMPONENT) {
          // 处理component
          processComponent(
            n1,
            n2,
            container,
            anchor,
            parentComponent,
            parentSuspense,
            isSVG,
            slotScopeIds,
            optimized
          )
        } else if (shapeFlag & ShapeFlags.TELEPORT) {
          ; (type as typeof TeleportImpl).process(
            n1 as TeleportVNode,
            n2 as TeleportVNode,
            container,
            anchor,
            parentComponent,
            parentSuspense,
            isSVG,
            slotScopeIds,
            optimized,
            internals
          )
        } else if (__FEATURE_SUSPENSE__ && shapeFlag & ShapeFlags.SUSPENSE) {
          ; (type as typeof SuspenseImpl).process(
            n1,
            n2,
            container,
            anchor,
            parentComponent,
            parentSuspense,
            isSVG,
            slotScopeIds,
            optimized,
            internals
          )
        } else if (__DEV__) {
          warn('Invalid VNode type:', type, `(${typeof type})`)
        }
    }

    // set ref
    if (ref != null && parentComponent) {
      setRef(ref, n1 && n1.ref, parentSuspense, n2 || n1, !n2)
    }
  }

3.1 processComponent

processComponent做的事情很简单，就是检查n1存在是否，如果存在执行updateComponent，

如果没存在并且n2不是缓存组件--通过keepAlive，那么就进行mountComponent

  const processComponent = (
    n1: VNode | null,
    n2: VNode,
    container: RendererElement,
    anchor: RendererNode | null,
    parentComponent: ComponentInternalInstance | null,
    parentSuspense: SuspenseBoundary | null,
    isSVG: boolean,
    slotScopeIds: string[] | null,
    optimized: boolean
  ) => {
    n2.slotScopeIds = slotScopeIds
    if (n1 == null) {
      if (n2.shapeFlag & ShapeFlags.COMPONENT_KEPT_ALIVE) { //缓存组件
        ; (parentComponent!.ctx as KeepAliveContext).activate(
          n2,
          container,
          anchor,
          isSVG,
          optimized
        )
      } else {  // n1没有值 init
        mountComponent(
          n2,
          container,
          anchor,
          parentComponent,
          parentSuspense,
          isSVG,
          optimized
        )
      }
    } else {
      updateComponent(n1, n2, optimized)
    }
  }

3.2 mountComponent

mountComponent的核心就是先通过createComponentInstance创建组件实例instance，然后执行setupComponent函数（处理setup函数，props，slots，包括处理有无render函数,模板解析)

最后调用setupRenderEffect函数 （调用render进行依赖收集）

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

    if (__DEV__ && instance.type.__hmrId) {
      registerHMR(instance)
    }

    if (__DEV__) {
      pushWarningContext(initialVNode)
      startMeasure(instance, `mount`)
    }

    // inject renderer internals for keepAlive
    if (isKeepAlive(initialVNode)) {
      ; (instance.ctx as KeepAliveContext).renderer = internals
    }

    // resolve props and slots for setup context
    if (!(__COMPAT__ && compatMountInstance)) {
      if (__DEV__) {
        startMeasure(instance, `init`)
      }
      // 给instance加工(处理setup函数，props，slots，包括处理有无render函数,模板解析)
      setupComponent(instance)
      if (__DEV__) {
        endMeasure(instance, `init`)
      }
    }

    // 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`)
    }
  }

m0_74793405
关注
【Vue3源码学习】— CH3.2 VNode解析(上)
YSG的博客
04-17 1204
在 Vue 3 中，VNode（虚拟节点）是框架内部用于表示真实 DOM 结构的 JavaScript 对象。VNode 使得 Vue 能够在不直接操作 DOM 的情况下，通过比较新旧 VNode 来决定是否需要更新 DOM。这种机制提高了渲染性能，并简化了数据与视图之间的同步过程。
Vue源码学习系列04——Vue构造函数解析(二): 选项合并策略(optionMergeStrategies)
袁杰Jerry
03-07 3902
上一节可以看成是merge数据前期准备，下面就介绍到了我们的mergeOption的重头戏啦——merge。先看代码（仍然是mergeOptions里面的代码）： const options = {} let key for (key in parent) { mergeField(key) } for (key in child) { if (!hasOwn(parent, key)) ...
Vue 3的 h 函数详解
訾博（ZiBo）的博客
09-27 8612
Vue 3的`h`函数（`createVNode`）是前端开发中一个强大的工具，用于创建虚拟DOM节点。虚拟DOM是Vue框架中的核心概念，通过它，我们可以更高效地更新页面内容。本文将深入探讨Vue 3的`h`函数及其用法。
vue源码学习资源
06-25
vue很好的学习文档 包括vue基础API vue项目，可以下载
通过createVNode创建dom并传自定义组件和自定义方法
最新发布
weixin_43472754的博客
08-08 228
其中getColumns是表头的配置，因为要传入操作的方法，所以是函数形式，传入的方法columnActions是一个对象。1.应用场景：表格自定义列和操作列。
Vue 创建组件外壳VNode原理分析
lznism666的博客
09-17 526
创建组件VNode <div> <test></test> </div> 上面这个页面被解析成了一个渲染函数 function() { with(this) { return _c('div', [ _c('test') ]) } } 这个_c就是创建VNode的入口，也就是实际上的_createElement函数 function _createElement( co
Vue之vnode创建
玉案轩窗的博客
10-01 9201
前言 上一篇文章中分析了html-&amp;amp;gt;vnode主要的处理过程，实际上主要是parse + generate解析template构建render函数的过程，实际上vnode的创建是在render执行过程中触发的。 本文主要分析render调用过程以及该过程vnode的创建。 具体分析 在render构建和调用那篇文章中，就提及render的调用实际上是Watcher实例对象创建触发的，主要的处...
vue源码学习--vue源码学习入门
dongkuan2508的博客
11-15 253
本文为开始学习vue源码的思路整理。在拿到vue项目源码的之后看到那些项目中的文件夹，会很困惑，不知道每个文件夹内的世界，怎么变换，怎样的魔力，最后产生了vue框架。学习源码也无从学起。我解决了这些困惑之后，形成了这篇文章----vue源码学习入门。文章会根据我自己的学习思路，理清vue项目的大体框架。文章先介绍vue项目中各个文件夹中内包含的功能，然后是从package.json文件开...
VUE3中h()函数和createVNode()函数的使用
热门推荐
qq_17355709的博客
01-16 3万+
使用方法： h(标签, {属性},内容) h(标签, {属性},[可以继续嵌套h()]) createVNode(标签, {属性},内容) createVNode(标签, {属性},[可以继续嵌套createVNode()]) 其实h()函数和createVNode()函数都是创建dom节点，他们的作用是一样的，直接上代码： import { createApp } from "vue"; //import App from "./App.vue"; import { defineComponent, h
vue基础代码演示——temp.json
03-21
如果觉得百度云下载速度慢可以在此处下载，如果没有积分也可以直接私信博主直接给文件，所需积分只是给个鼓励，谢谢支持！！！
Vue学习笔记——【尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通-哔哩哔哩】 https://b23.tv/
08-14
Vue学习笔记——【尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通-哔哩哔哩】 https://b23.tv/
VUE源码学习
ColdCoder的博客
02-09 623
索引规划 CreateApp时发生了什么？ “虚拟节点”的生成 响应式 编译 API nexttick VUE3源码整体目录结构 Vue3 源码的架构： ├── .circleci // CI 配置目录 ├── .ls-lint.yml // 文件命名规范 ├── .prettierrc // 代码格式化 prettier 的配置文件 ├── CHANGELOG.md // 更新日志 ├── LICENSE ├── README.md ├── api-extractor.json // TypeS
vue源码学习
weixin_44208404的博客
11-11 432
将html转化成AST语法树，然后根据AST语法树使用render函数生成虚拟DOM节点。
Vue源码学习(一)
Mean
03-26 1673
今天开始学习Vue源码,顺便不定时记录下 从github上clone源码(地址为:https://github.com/vuejs/vue) 此时版本为2.6.10,可以看到尤大大6天前的提交 参照以下贡献规则文档:https://github.com/vuejs/vue/blob/dev/.github/CONTRIBUTING.md#project-structure,对项目结构进行初步理解...
【vue源码学习】
qq_63223553的博客
12-05 346
组件更新核心是响应式数据监控到数据的改变、重新生成了虚拟dom树、然后通过diff算法计算出前后虚拟dom树的差异点、更新dom时值更新变化的部分答：O（n^3）意味着如果要暂时1000个节点、就要依次直系那个上十亿次的比较，无法承受大数据量的对比。 直接比较和修改两个数的复杂度为什么是n^3？ 答：老树的每一个节点都去遍历新树的节点，直接找到新数对应的节点。那么这个流程就是O（n^2），再紧接着找到不同之后，再计算最短修改距离然后修改节点，这里是0 N的三次方。1、Web UI中DOM节点跨层级的移动操作
vue2升级vue3: h、createVNode、render、createApp使用
周陆军的博客，分享it技术。
07-25 6057
h 函数本质就是 createElement() ，h函数其实是createVNode的语法糖，返回的就是一个Js普通对象。在createVNode API 在创建Vnode的时候，会对Vnode的props、children、ref、class、style等属性进行规范梳理或者合并。...
Vue2.x 源码 - render 函数生成 VNode
weixin_43299180的博客
11-12 3017
上一篇：Vue2.x 源码 - 编译过程（compile） Vue 的渲染过程： 上一篇看了一下编译，编译之后返回了 render 函数，那么 render 又是如何生成 vnode 的呢？本文来看一下。 在 Vue 官方文档中介绍 render 函数 的第一个参数是 createElement 用来创建 VNode; <div id="app"> {{ message }} </div> 用 render 函数表示： render:function(createElem.
Vue3 学习笔记 —— 函数式编程、createVNode、render、h 函数
Lyrelion的博客
12-10 1万+
Vue3 学习笔记 —— 函数式编程、createVNode、render、h 函数
Vue踩坑之旅——Vuex
06-03
非常感谢您的提问！以下是回答： Vuex 是一个专门为 Vue.js 应用程序开发的状态管理库，它集中管理应用程序的所有组件的状态。在使用 Vuex 过程中，可能会遇到以下一些常见的问题和坑： 1. 不要在 mutations 中执行异步操作，因为 mutations 是同步执行的，异步操作会导致状态不一致。 2. 在组件中使用 mapState、mapGetters、mapMutations、mapActions 等辅助函数时，如果命名冲突，可以使用命名空间来避免。 3. 在使用 Vuex 时，应该注意代码的可维护性和可读性，避免将所有逻辑都写在一个文件中，应该按照模块化的方式组织代码。 希望这些信息能对您有所帮助！
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值