虚拟 DOM 实现是 Vue 框架的核心部分之一，它负责在真实 DOM 之上抽象出一个轻量级的、可复用的 JavaScript 对象树，用于高效地更新视图。

什么是虚拟DOM?

虚拟 DOM 是一个编程概念，它将真实的 DOM 树抽象为一个轻量级的 JavaScript 对象树。当应用状态发生变化时，Vue 会先比较新的虚拟 DOM 树和旧的虚拟 DOM 树之间的差异，然后只更新这些差异部分对应的真实 DOM，而不是重新渲染整个页面。这种方式大大提高了渲染性能。

而我们如何将虚拟DOM转化成真实DOM呢？

App.vue:

<template><div><a href="https://vitejs.dev" target="_blank"><img src="/vite.svg" class="logo" alt="Vite logo" /></a><a href="https://vuejs.org/" target="_blank"><img src="./assets/vue.svg" class="logo vue" alt="Vue logo" /></a></div><HelloWorld msg="Vite + Vue" />
</template>

从我们编写的vue代码以及转换成真实DOM整个流程如下：

模板 > render函数 > 虚拟DOM > 真实DOM

上图中是我写的App.vue。我们将其打印出来

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'console.log(App); // 打印出来的模板createApp(App).mount('#app')

 打印结果:

我们可以看到这个render函数，我们的虚拟DOM是由render函数创建的。

export function render(_ctx, _cache, $props, $setup, $data, $options) {const _component_HelloWorld = _resolveComponent("HelloWorld")return (_openBlock(), _createElementBlock("template", null, [_createElementVNode("div", null, [_createElementVNode("a", {href: "https://vitejs.dev",target: "_blank"}, [_createElementVNode("img", {src: "/vite.svg",class: "logo",alt: "Vite logo"})]),_createElementVNode("a", {href: "https://vuejs.org/",target: "_blank"}, [_createElementVNode("img", {src: "./assets/vue.svg",class: "logo vue",alt: "Vue logo"})])]),_createVNode(_component_HelloWorld, { msg: "Vite + Vue" })]))
}

当我的虚拟DOM创建出来后，如何转成真实DOM呢？

这里用到了patch 函数：

patch 是 Vue 中用于比较和更新虚拟 DOM 的核心函数。它接受两个参数：旧的 VNode 和新的 VNode。根据这两个节点的类型和属性等信息，patch 函数会决定是否需要更新真实 DOM，以及如何更新。

简单表示下patch相关作用！

function patch(  n1: VNode | null,  // 旧虚拟DOMn2: VNode,  // 新的虚拟DOMcontainer: HostNode,  anchor: ?HostNode = null,  parentComponent: ?Component = null,  parentSuspense: ?SuspenseBoundary = null,  isSVG: boolean = false,  optimized: boolean = false  
): VNode {  // ...  const { type, ref, shapeFlag } = n2;  switch (type) {  case Text:  // 处理文本节点  // ...  break;  case Comment:  // 处理注释节点  // ...  break;  case Static:  // 处理静态节点  // ...  break;  case Fragment:  // 处理 Fragment 节点  // ...  break;  default:  // 处理元素或组件节点  if (shapeFlag & ShapeFlags.ELEMENT) {  // ... 处理元素节点 ...  } else if (shapeFlag & ShapeFlags.COMPONENT) {  // ... 处理组件节点 ...  }  // ...  }  // ... 其他逻辑，如处理子节点、引用、挂载等 ...  
}

后面单开一章讲解patch！