vue3源码分析 -- h

最新推荐文章于 2025-12-15 15:15:21 发布
原创 最新推荐文章于 2025-12-15 15:15:21 发布 · 729 阅读 · 10 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #前端 #vue.js

上篇runtime中我们了解到，虚拟 DOM是 Vue 在运行时，通过h函数获取到VNode对象，这里我们就来看下h函数是如何实现的

案例

首先引入h函数，之后通过h函数生成一个vnode对象，并将其打印

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../../dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script>
      const { h } = Vue

      debugger
      const vnode = h(
        'div',
        {
          class: 'test'
        },
        'hello render'
      )
      console.log(vnode)
    </script>
  </body>
</html>

h函数定义在packages/runtime-core/src/h.ts文件下：

可以看出h函数接收三个参数，当前type为div，propsOrChildren为{ class: 'test'}，children 为hello render

在这里插入图片描述

createVNode方法

之后根据参数的长度不同走不同的判断逻辑，其核心是执行createVNode方法，实际执行的是_createVNode，该方法在packages/runtime-core/src/vnode.ts文件中：

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 {
  if (!type || type === NULL_DYNAMIC_COMPONENT) {
    if (__DEV__ && !type) {
      warn(`Invalid vnode type when creating vnode: ${type}.`)
    }
    type = Comment
  }
  // 是否是 vnode 通过 __v_isVNode 来判断
  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.
  // class 和 style 的增强
  if (props) {
    // for reactive or proxy objects, we need to clone it to enable mutation.
    props = guardReactiveProps(props)! // 解析 props
    let { class: klass, style } = props // 结构  class 赋值给 klass, style
    if (klass && !isString(klass)) {
      props.class = normalizeClass(klass) // 增强 class
    }
    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
  const shapeFlag = isString(type) // 根据 type 类型进行 shapeFlag 赋值 当前为 div 则 ShapeFlags.ELEMENT
    ? 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
  )
}

这里isVNode(type)通过判断type是否是 VNode，我们来看下isVNode方法：

export function isVNode(value: any): value is VNode {
  return value ? value.__v_isVNode === true : false
}

主要通过__v_isVNode属性来判断是否是VNode，之后再判断props即传入的{ class: 'test'}，对class 、style增强，这块我们放到之后来讨论

接着又对shapeFlag赋值，当前type为 string 类型，此时被赋值为ShapeFlags.ELEMENT即等于1，最后将处理好的type、props、children、shapeFlag等参数传入createBaseVNode方法中

在这里插入图片描述

_createVNode方法核心：

  • 对class 、style增强
  • 对shapeFlag标记赋值

对shapeFlag标记赋值

接着再看下createBaseVNode方法：

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

  if (needFullChildrenNormalization) {
    normalizeChildren(vnode, children) // 创建子节点
    // normalize suspense children
    if (__FEATURE_SUSPENSE__ && shapeFlag & ShapeFlags.SUSPENSE) {
      ;(type as typeof SuspenseImpl).normalize(vnode)
    }
  } else if (children) {
    // 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
}

该方法首先定义了一个vnode对象，属性__v_isVNode标记为该对象是否为VNode对象。由于当前needFullChildrenNormalization默认传入的是true，所以直接执行normalizeChildren(vnode, children)方法来创建子节点，再来看下normalizeChildren方法：

export function normalizeChildren(vnode: VNode, children: unknown) {
  let type = 0
  const { shapeFlag } = vnode // 当前shapeFlag 是 1 children是字符串
  // children 为 undefined 或 null
  if (children == null) {
    children = null
  } else if (isArray(children)) { // 是否是数组
    type = ShapeFlags.ARRAY_CHILDREN
  } else if (typeof children === 'object') { // 是否是对象
    if (shapeFlag & (ShapeFlags.ELEMENT | ShapeFlags.TELEPORT)) {
      // Normalize slot to plain children for plain element and Teleport
      const slot = (children as any).default
      if (slot) {
        // _c marker is added by withCtx() indicating this is a compiled slot
        slot._c && (slot._d = false)
        normalizeChildren(vnode, slot())
        slot._c && (slot._d = true)
      }
      return
    } else {
      type = ShapeFlags.SLOTS_CHILDREN
      const slotFlag = (children as RawSlots)._
      if (!slotFlag && !(InternalObjectKey in children!)) {
        // if slots are not normalized, attach context instance
        // (compiled / normalized slots already have context)
        ;(children as RawSlots)._ctx = currentRenderingInstance
      } else if (slotFlag === SlotFlags.FORWARDED && currentRenderingInstance) {
        // a child component receives forwarded slots from the parent.
        // its slot type is determined by its parent's slot type.
        if (
          (currentRenderingInstance.slots as RawSlots)._ === SlotFlags.STABLE
        ) {
          ;(children as RawSlots)._ = SlotFlags.STABLE
        } else {
          ;(children as RawSlots)._ = SlotFlags.DYNAMIC
          vnode.patchFlag |= PatchFlags.DYNAMIC_SLOTS
        }
      }
    }
  } else if (isFunction(children)) { // 是否是 函数
    children = { default: children, _ctx: currentRenderingInstance }
    type = ShapeFlags.SLOTS_CHILDREN
  } else {
    children = String(children) // 此时 'hello render'
    // force teleport children to array so it can be moved around
    if (shapeFlag & ShapeFlags.TELEPORT) {
      type = ShapeFlags.ARRAY_CHILDREN
      children = [createTextVNode(children as string)]
    } else {
      type = ShapeFlags.TEXT_CHILDREN
    }
  }
  vnode.children = children as VNodeNormalizedChildren
  // 9 按位或赋值  vnode.shapeFlag |= type 等同于 vnode.shapeFlag = vnode.shapeFlag | type
  vnode.shapeFlag |= type 
}

该方法接收两个参数，一个是定义的vnode对象，一个是children即hello render。之后再从vnode对象中解构出shapeFlag，即当前 string 类型为 1，根据children类型不同对children、type和 shapeFlag重新赋值

由于当前children为 string 类型，执行children = String(children)，此时children为hello render，并将其vnode.children = children重新赋值。type = ShapeFlags.TEXT_CHILDREN 即 type 为 8

在这里插入图片描述

最后对 vnode.shapeFlag |= type 按或位赋值即为 9

在这里插入图片描述

这里拓展下 |= 按或位赋值，vnode.shapeFlag |= type 等同于 vnode.shapeFlag = vnode.shapeFlag | type。当前 vnode.shapeFlag = 8，type = 1，转为二进制：

// type = 1
00000000 00000000 00000000 00000001

// shapeFlag = 8
00000000 00000000 00000000 00001000

// 或 就是通过上下 ↕ 比较，如果上下是 0 则是 0，上下是 0 和 1 则是 1
// 结果是 9 
00000000 00000000 00000000 00001001

所以此时计算后的 vnode.shapeFlag = 9，之后 createBaseVNode 执行完毕返回 vnode 对象，至此 h 函数执行完毕，打印 vnode 对象：

在这里插入图片描述

对class、style增强

我们再回过来看下 h 函数如何对 class style 增强的，该逻辑在 _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 {
  // 省略

  // class & style normalization.
  // class 和 style 的增强
  if (props) {
    // for reactive or proxy objects, we need to clone it to enable mutation.
    props = guardReactiveProps(props)! // 解析 props
    let { class: klass, style } = props // 结构  class 赋值给 klass, style
    if (klass && !isString(klass)) {
      props.class = normalizeClass(klass) // 增强 class
    }
    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)
    }
  }
  // 省略
  
  return createBaseVNode(
    type,
    props,
    children,
    patchFlag,
    dynamicProps,
    shapeFlag,
    isBlockNode,
    true
  )
}

结合一下案例进行分析：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../../dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script>
      const { h, render } = Vue
      // <div :class="{ red: true }">增强的 class</div>
      debugger
      const vnode = h(
        'div',
        {
          class: {
            red: true
          }
        },
        '增强的 class'
      )
      render(vnode, document.querySelector('#app'))
    </script>
  </body>
</html>

可以看出 { class: klass, style } = props 对 props 解构，并将 class 赋值给 klass，如果存在 klass 且不为 string 类型，则执行 props.class = normalizeClass(klass)，对其 props.class 重新赋值。我们再看下 normalizeClass 方法：

export function normalizeClass(value: unknown): string {
  let res = ''
  // 是字符串 直接赋值
  if (isString(value)) {
    res = value
  } else if (isArray(value)) {
    // 是数组 则递归迭代再拼接
    for (let i = 0; i < value.length; i++) {
      const normalized = normalizeClass(value[i])
      if (normalized) {
        res += normalized + ' '
      }
    }
  } else if (isObject(value)) {
    // 是对象 则 for in 再拼接返回
    for (const name in value) {
      if (value[name]) {
        res += name + ' '
      }
    }
  }
  return res.trim()
}

根据 value 类型，如果是字符串则直接返回；如果是数组则递归迭代再拼接返回；如果是对象则迭代再拼接返回。由于当前 value 是对象 { red: true }，所以此时的 res 为 red：

在这里插入图片描述

最终的结果：

在这里插入图片描述

总结

1）createVNode 核心是处理 shapeFlag 赋值，之后在 createBaseVNode 中又通过 shapeFlag 和 type 根据按位或运算，重新对 shapeFlag 赋值

2）h 函数本质上是对四个属性处理 children、props、shapeFlag、type 和 class style 的增强

【vue3源码】十四、认识vnode中的shapeFlag和patchFlag属性
MAXLZ的博客
09-29 2919
介绍vnode中的shapeFlag和patchFlag属性属性
vue3.0源码解读 -渲染系统
u014125106的博客
05-30 3055
vue3.0的patch相对于2.0做了很多优化，vue3.0在编译阶段会对vnode截形flag标记，用于对vnode更新时的diff做性能优化。下面我们从patch函数入口开始一步一步的了解3.0时如何进行patch的，以及具体有了哪些性能提升。 ...
vue3中h函数的使用
weixin_39724159的博客
06-22 3317
需要注意的是，我们这里的 comp 是一个 vnodes ，而 setup 函数并不是响应式的环境，所以当我们在 setup 函数中调用 h 函数来获取 vnodes 时，h函数是用于创建一个 vnodes ，它既可以用于创建原生元素，也可以创建组件，其渲染后的效果等同于使用模版语言来进行创建。我们可以看到 slots 其实是一个对象，键是插槽的名字，值其实就是一个 渲染函数 h()，这里使用的是一个批量注册的方式导入 HelloWorld 组件，Comp 是一个全局组件。
通达信高低点预测主图指标公式
2503_91947154的博客
05-10 1143
牛股顶55:={分型顶 AND}H=HHV(H,BARSLAST(牛股底54)) AND L>LLV(L,BARSLAST(牛股底54)) AND BARSLAST(牛股顶54)<BARSLAST(牛股底54) AND (BARSNEXT(牛股底54)<BARSNEXT(牛股顶54) OR BARSNEXT(牛股顶54)=DRAWNULL);牛股顶432:=牛股顶431 AND (H=HHV(H,BARSLAST(牛股底431)) OR BARSLAST(牛股底431)=DRAWNULL);
vue3源码分析 -- runtime
triggerV的博客
04-02 651
runtime运行时，主要在目录下，核心提供了hrender等函数。在理解它们之前，我们需要了解下HTML DOM 树和虚拟 DOM等概念。
Vue 2.0源码分析-代码构建
分享前端工程化、动效魔法与性能之舞！
11-21 849
Vue.js 源码是基于Rollup构建的，它的构建相关配置都在 scripts 目录下。通常一个基于 NPM 托管的项目都会有一个 package.json 文件，它是对项目的描述文件，它的内容实际上是一个标准的 JSON 对象。我们通常会配置 script 字段作为 NPM 的执行脚本，Vue.js 源码构建的脚本如下：这里总共有 3 条命令，作用都是构建 Vue.js，后面 2 条是在第一条命令的基础上，添加一些环境参数。
3.1 vc-upload源码分析 -- ant-design-vue系列
weixin_44438233的博客
09-11 1699
ant-design-vue源码系列，本篇是upload组件的底层实现：vc-upload。upload的封装在下一篇介绍。
【Vue3】源码解析-Runtime
欢迎指错||纠正||建议||水评+点赞&&评论&&关注&&转发
03-15 1443
【Vue3】源码解析-Runtime
vue-router源码分析
weixin_50786692的博客
09-30 3283
vue-router 源码分析 前言：在vue的生态当中，vue-router必然是有一席之地的，我们有用到过其中各种好用的api，比如addRoute、.push、.replace、vm.$route、vm.routes等等，可以这么说，在单页面应用盛行的今天，我们如果使用vue来开发项目，一定离不开vue-router。而我们今天就来认真的分析一下vue-router的源码，了解一下vue-router的各种各样api的原理，以及他是怎么嵌入vue项目中运行的，好了废话不多说我们开始吧！ 一、源码结
【Vue3】源码解析-前置
欢迎指错||纠正||建议||水评+点赞&&评论&&关注&&转发
07-19 6733
vue.js3.0源码解析系列文章则是会从源码层面给大家抽丝剥茧，让大家知道我们内部到底是如何实现的。我们希望通过该源码解析系列，能让大家对有一个更深刻的理解。
Vue-SourceCode-Analysis:Vue原始码分析-Vue source code analysis
03-24
通过对Vue源码的深入学习，开发者不仅可以解决实际开发中的问题，还能提升对前端开发的全局理解，从而编写更高效、更优化的代码。Vue-SourceCode-Analysis项目提供了这样的学习路径，帮助开发者一步步探索Vue.js的...
vue2源码分析-keep-alive组件
小陈的博客
01-17 671
keep-alive是Vue.js的一个内置组件。它能够将指定的组件实例保存在内存中，而不是直接将其销毁，它是一个抽象组件，不会被渲染到真实DOM中，也不会出现在父组件链中。具体用法咱们这里就不再细说了，今天主要是探讨它的源码。本文vue版本为2.6.14keep-alive组件的缓存是基于VNode节点的而不是直接存储DOM结构。它将满足条件的组件在cache对象中缓存起来，在需要重新渲染的时候再将vnode节点从cache对象中取出并渲染。并且使用到了LRU算法(最近最少使用)
JavaScript 根据数组对象的某个 指定属性 分组合并，并累加金额
最新发布
zhangyao940330的博客
12-15 99
item } 浅拷贝原对象的所有属性（如 id、name），合并时仅更新金额，其他属性保留第一个分组对象的值（若需保留所有属性，可修改为数组存储，如 name: [‘苹果’, ‘香蕉’]）。分组逻辑：用 Map 存储分组，键为 groupKey 的值（如 ‘水果’），值为合并后的对象。Map 比普通对象更安全（避免键名冲突，支持数字 / 对象等类型的键）。缺失金额或非数字（如 undefined、‘abc’）视为 0。字符串金额（如 ‘8’）自动转为数字；扩展需求：保留分组内所有非金额属性。
商城后台管理系统 02 添加规格参数-动态表单
weixin_52943021的博客
12-15 168
Boolean。
javascript 性能优化实战：异步和延迟加载
小伙伴们全都Lucky！
12-11 931
本文探讨JavaScript性能优化中的异步加载与延迟加载技术。异步加载通过async/defer属性或动态创建script元素避免阻塞渲染；延迟加载则利用IntersectionObserver API按需加载非关键资源。二者结合可显著提升性能：异步加载核心脚本确保交互流畅，延迟加载减少初始请求量。实践表明，该方案能降低DOMContentLoaded时间30%以上，减少初始加载量90%，但需注意async脚本的执行顺序问题和延迟加载的回退处理。文中提供了完整的代码实现示例。
第十篇：Day28-30 工程化优化与部署——从“能跑”到“好用”（对标职场“项目上线”需求）
2402_87628679的博客
12-11 952
gzip on;性能优化：掌握Vite的资源压缩、Tree Shaking、代码分割配置，能实现路由/组件懒加载、虚拟滚动等渲染优化，理解gzip/br压缩的原理和后端配置；兼容性处理：能通过`@vitejs/plugin-legacy`和autoprefixer适配低版本浏览器，理解`browserslist`的作用，知道Vue 3的兼容性限制；多环境配置：能创建多环境变量文件，在项目中使用`import.meta.env`访问环境变量，区分开发/测试/生产环境的配置；项目部署。
ESM (ES Modules) 和 CJS (CommonJS)
Irene1991的博客
12-11 647
ESM和CJS是JavaScript的两种模块系统。ESM是ES6引入的现代标准，采用静态编译时加载，支持TreeShaking；CJS是Node.js传统方式，采用动态运行时加载。ESM语法为import/export，CJS为require()/module.exports。新项目推荐ESM，维护旧项目可使用CJS。两者可互相调用：ESM通过createRequire调用CJS，CJS通过动态import()调用ESM。配置时需注意文件扩展名和package.json的type字段声明。ESM代表Jav
华为云 DevUI初体验：如何快速入门项目搭建
康宝的博客
12-10 543
本文详细介绍了基于Angular 18和华为云DevUI的企业级Web应用开发环境搭建流程。主要内容包括：Node.js 20+环境准备、Angular CLI 18安装、项目初始化配置（选择SCSS样式）、DevUI组件库及图标库的安装。文章重点说明了如何在项目中正确配置DevUI样式和模块，并演示了基础组件的使用。通过这套技术方案，开发者可以快速构建具备丰富UI组件支持的企业级应用，提高开发效率。
第十一篇：Day31-33 前端安全与性能监控——从“能用”到“安全可靠”（对标职场“系统稳定性”需求）
2402_87628679的博客
12-11 1228
对于小型项目或特定业务场景，可通过自定义埋点实现核心指标监控，无需接入复杂工具。// src/utils/monitor.js（自定义监控工具） import axios from 'axios';// 监控数据上报接口（后端提供） const MONITOR_UPLOAD_URL = '/api/monitor/upload';
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值