Vue源码学习(二)——createVnode

已于 2023-12-14 15:08:37 修改
阅读量1.1k 收藏
点赞数 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
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue源码学习总结 深入响应式原理
01-08
Vue.prototype._init= function (options?: Object) { callHook(vm, 'beforeCreate') initInjections(vm) // resolve injections before data/props 初始化注入 initState(vm) // 初始化 data/props/method/...
详解Vue源码学习之双向绑定
01-21
当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的...
深入探索 Vue 中的 createVNode 与 resolveComponent
王兆镇的博客
05-04 704
在 Vue 开发中，和是两个至关重要的工具，它们为我们提供了强大的能力来灵活地创建和操控组件。
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
vue3源码之diff算法
最新发布
欠踹的背影
05-14 907
通过阅读vue3源码，学习理解其diff算法的过程
createVNode - vue3源码解读
SK_study的博客
05-25 4461
theme: fancy 目录: createApp - vue3源码解读 - 掘金 (juejin.cn)) 我们接着上一篇文章来讲，createApp构建之后，我们进行mount挂载，在其中执行了两个重要的操作，第一是createVNode，第二是render，今天我们来学习下createVNode中究竟发生了什么。 一.执行createVNode 此方法在mount中调用，其中传入两个参数，一个是rootComponent，也就是我们的根组件App.vue，另一个是rootProps根参数，初始.
Vue3 学习笔记 —— 函数式编程、createVNode、render、h 函数
Lyrelion的博客
12-10 1万+
Vue3 学习笔记 —— 函数式编程、createVNode、render、h 函数
vue2升级vue3: h、createVNode、render、createApp使用
周陆军的博客，分享it技术。
07-25 5737
h 函数本质就是 createElement() ，h函数其实是createVNode的语法糖，返回的就是一个Js普通对象。在createVNode API 在创建Vnode的时候，会对Vnode的props、children、ref、class、style等属性进行规范梳理或者合并。...
函数式编程、createVNode、render、h 函数
m0_38004751的博客
08-31 636
函数式编程、createVNode、render、h 函数
vue2.0源码学习资源
10-29
Vue 2.0的源码学习是一项深入理解其工作原理的重要任务，这对于提升开发技能和优化应用性能有着不可忽视的价值。在这个“vue2.0源码学习资源”中，我们将探讨Vue的核心概念，包括AST（抽象语法树）、编译原理、观察...
vue源码学习与交流心得
05-13
深入学习Vue的源码可以帮助开发者更好地理解其工作原理，从而提升开发效率和解决复杂问题的能力。在本文中，我们将探讨在学习Vue源码过程中的一些关键知识点。 首先，Vue的核心理念是组件化。组件是Vue应用程序的...
vue源码下载学习一下
11-13
在“vue源码下载学习一下”的主题下，我们可以从以下几个方面来深入探讨Vue.js的源码： 1. **虚拟DOM**：Vue.js 使用虚拟DOM（Virtual DOM）技术，这是一种内存中的数据结构，可以高效地跟踪和更新视图。虚拟DOM...
createVNode 渲染函数的使用
weixin_51353891的博客
11-10 1937
1: 使用渲染函数createVNode创建dom，解决了一个bug
Vue之vnode创建
玉案轩窗的博客
10-01 9079
前言 上一篇文章中分析了html-&amp;amp;gt;vnode主要的处理过程，实际上主要是parse + generate解析template构建render函数的过程，实际上vnode的创建是在render执行过程中触发的。 本文主要分析render调用过程以及该过程vnode的创建。 具体分析 在render构建和调用那篇文章中，就提及render的调用实际上是Watcher实例对象创建触发的，主要的处...
Vue2源码学习笔记 - 20.渲染与编译—createComponent 创建组件VNode
小问's blog
08-05 938
如上所述，函数先处理组件的构造函数，然后整理相关数据，再安装钩子函数，最后创建组件占位 vnode 对象。值得注意的是，这个 vnode 对象并不是实际渲染时 DOM 元素对应的 vnode，正如它的名字一样，它更像是用来占位的。其中的钩子函数在渲染时会创建组件实例，这个后面我们继续研究学习。...
前端笔记之vue3 之 render函数和createVNode函数使用
qq_41910359的博客
11-10 7911
本内容只说createVNode函数的用法，不做任何探究和讲解
Vue中Vnode的创建与处理
张小杰
11-27 1万+
什么是虚拟DOM 虚拟DOM（Virtual DOM）是使用JavaScript对象描述真实DOM Vue.js中的虚拟DOM借鉴Snabbdom，并添加了Vue.js的特征，例如：指令和组件机制 为什么要使用虚拟DOM： 避免直接操作真实DOM，提高开发效率 作为一个中间层可以跨平台，支持web端渲染，还可以支持服务端渲染 虚拟DOM不一定可以提高性能： 首次渲染的时候会增加开销 复杂视图情况下提升渲染性能 h函数 vm.$createElement(atg, data, children,
Vue 源码（一）如何创建VNode
自己整理的一些前端知识
08-09 417
highlight: tomorrow-night-eighties theme: cyanosis 前言 这篇文章直接从挂载开始说起，不会从new Vue开始，因为已经有很多文章讲解过；其实这篇文章也是这样，但是感觉还是记一下，也算为后面做铺垫了。 知识点 通过这篇文章可以了解如下内容 - Vue 的挂载过程 - Render Watcher 是什么 - Render Watche...
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、付费专栏及课程。

余额充值