vue 源码分析 step_2-渲染函数如何生成 Vnode并最终生成真实 DOM？

最新推荐文章于 2025-10-04 08:17:50 发布

原创

最新推荐文章于 2025-10-04 08:17:50 发布 · 392 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文深入探讨Vue渲染函数如何将编译后的代码字符串转换为Vnode，并详细阐述了_v和_c在创建不同Vnode中的作用。通过源码分析，揭示了从Vnode到真实DOM的diff和patch过程，特别是nodeOps方法在DOM操作中的应用。

我们知道经过编译器生成的代码字符串，最终要通过渲染函数 createElement 生成 Vnode,也知道编译生成的代码字符串会有_f,_m,_v,_c...的特征

export function createComponent (
  Ctor: Class<Component> | Function | Object | void,
  data: ?VNodeData,
  context: Component,
  children: ?Array<VNode>,
  tag?: string
): VNode | Array<VNode> | void {
......
  const vnode = new VNode(
    `vue-component-${Ctor.cid}${name ? `-${name}` : ''}`,
    data, undefined, undefined, undefined, context,
    { Ctor, propsData, listeners, tag, children },
    asyncFactory
  )
......

  return vnode
}

这个就是最终产出的 vnode 了。

为什么代码字符串中的_c,_v就能创建不同的 vnode？

在src/core/instance/render-helpers/index.js 中

export function installRenderHelpers (target: any) {
  target._o = markOnce
  target._n = toNumber
  target._s = toString
  target._l = renderList
  target._t = renderSlot
  target._q = looseEqual
  target._i = looseIndexO