Vue3源码 | 挂载组件元素的剖析

2023-11-28 18:17:19

在上一篇文章中，我们已经详细剖析了 createApp 创建应用实例的主流程逻辑。为了继续我们的探索之旅，本文将着眼于 组件元素的挂载 过程，深入解析 Vue3 源码中虚拟节点的创建、渲染以及挂载的具体实现。

一、虚拟节点的创建

在 Vue3 中，虚拟节点是 DOM 元素的轻量级对象，它存储了与 DOM 元素相关的所有信息，包括标签名、属性、子节点等。虚拟节点的创建过程主要发生在 patch 函数中。

export function patch(oldVnode, vnode) {
  // 省略其他代码

  // 创建虚拟节点
  const newVNode = createVNode(vnode.type, vnode.props, vnode.children)

  // 省略其他代码
}

createVNode 函数负责创建虚拟节点，它接收三个参数：

type：组件类型，可以是字符串（表示原生 HTML 标签）、对象（表示 Vue 组件）或函数（表示函数式组件）。
props：组件属性，是一个对象，包含了组件的属性名和属性值。
children：组件子节点，可以是字符串、虚拟节点数组或函数（表示渲染函数）。

createVNode 函数首先会根据 type 参数创建相应的虚拟节点对象，然后根据 props 和 children 参数设置虚拟节点的属性和子节点。

二、虚拟节点的渲染

创建好虚拟节点后，接下来需要将其渲染为真正的 DOM 元素。这个过程主要发生在 mountElement 函数中。

export function mountElement(vnode, container, anchor) {
  // 省略其他代码

  // 渲染虚拟节点
  renderVNode(vnode, container, anchor)

  // 省略其他代码
}

renderVNode 函数负责渲染虚拟节点，它接收三个参数：

vnode：要渲染的虚拟节点。
container：要将渲染结果插入的容器元素。
anchor：要将渲染结果插入到容器元素的哪个位置之前。

renderVNode 函数首先会根据 vnode 的类型调用不同的渲染函数。对于原生 HTML 标签，它会调用 createElement 函数创建 DOM 元素；对于 Vue 组件，它会调用 createComponent 函数创建组件实例并渲染组件模板；对于函数式组件，它会调用 renderVNode 函数递归渲染组件的渲染函数。

三、组件元素的挂载

组件元素的挂载过程主要发生在 createComponent 函数中。

export function createComponent(vnode, parent) {
  // 省略其他代码

  // 挂载组件元素
  mountComponent(instance)

  // 省略其他代码
}

mountComponent 函数负责挂载组件实例，它接收一个组件实例对象作为参数。

export function mountComponent(instance) {
  // 省略其他代码

  // 挂载组件元素
  callHook(instance, 'beforeMount')
  let updateComponent = () => {
    instance.update()
    instance.mounted = true
    callHook(instance, 'mounted')
  }
  updateComponent()

  // 省略其他代码
}

mountComponent 函数首先会调用 beforeMount 钩子函数，然后调用 updateComponent 函数更新组件状态，最后调用 mounted 钩子函数。

updateComponent 函数负责更新组件状态，它首先会调用 update 方法更新组件状态，然后将 mounted 属性设置为 true，最后调用 mounted 钩子函数。

四、探索之旅

为了帮助读者更好地理解 Vue3 源码中组件元素的挂载过程，我们提供了一个探索之旅示例。

// 在控制台中输入以下代码
console.log(Vue.version)
console.log(Vue.compile)
console.log(Vue.createApp)
console.log(Vue.defineComponent)
console.log(Vue.nextTick)