Vue createElm 深度解析：从源码解读挂载机制

2024-01-21 10:11:36

浅曦Vue源码漫谈——挂载阶段之createElm方法（二十八）

初识Vue时，我们只需要关注它的响应式原理即可，而深入使用后，发现Vue源码中还有很多值得探索的地方，比如它的挂载阶段。挂载阶段是Vue实例将数据成功渲染到页面的关键，而createElm方法就是挂载阶段的重要一环，它负责根据虚拟节点（VNode）创建真实的DOM元素，是Vue初次渲染的基石。

createElm方法解析

createElm方法位于runtime/vdom/patch.js文件中，负责将虚拟节点（VNode）转换成真实的DOM元素。它的基本流程如下：

function createElm(vnode: any, insertedVnodeQueue: any, parentElm?: any, refElm?: any): any {
  // 如果虚拟节点类型是文本
  if (vnode.type === Simple) {
    return createSimpleVnode(vnode)
  }
  // 如果虚拟节点是注释
  if (vnode.type === Comment) {
    return createCommentVnode(vnode)
  }
  // 如果虚拟节点是组件
  if (typeof vnode.tag === 'string') {
    return createComponentVnode(vnode, insertedVnodeQueue, parentElm, refElm)
  }
}

从流程中可以看出，createElm方法根据虚拟节点的类型分为三种情况：

文本节点： 直接创建文本节点并返回。
注释节点： 直接创建注释节点并返回。
组件节点： 根据组件的类型创建组件实例，并调用其$mount方法挂载到真实DOM元素上。

自定义组件的挂载

对于自定义组件，createElm方法会先创建组件实例，然后调用其mount方法挂载到真实DOM元素上。mount方法内部会调用createElm方法创建组件的DOM元素，并将组件实例的$el属性指向该DOM元素。

function createComponentVnode(
  vnode: any,
  insertedVnodeQueue: any,
  parentElm: any,
  refElm: any
): any {
  // 创建组件实例
  const componentInstance = new vnode.tag()
  // 调用组件实例的$mount方法，挂载到真实DOM元素
  componentInstance.$mount(parentElm, refElm)
  // 将组件实例的$el属性指向真实DOM元素
  vnode.elm = componentInstance.$el
  // 将组件实例添加到insertedVnodeQueue中
  if (insertedVnodeQueue) {
    insertedVnodeQueue.push(componentInstance)
  }
  // 返回组件实例的根DOM元素
  return componentInstance.$el
}