Vue3中虚拟dom转成真实dom的过程详解
更新时间：2024年09月10日 08:24:55 作者：zykk
Vue.js 在其运行过程中会将模板编译成虚拟 DOM (VNode),然后再将 VNode 渲染成实际的 DOM 节点,这个过程是由 Vue 内部的编译器和渲染系统完成的,本文给大家介绍了Vue3中虚拟dom转成真实dom的过程,需要的朋友可以参考下
前言
Vue.js 在其运行过程中会将模板编译成虚拟 DOM (VNode)，然后再将 VNode 渲染成实际的 DOM 节点。这个过程是由 Vue 内部的编译器和渲染系统完成的.
虽然Vue 3 的虚拟 DOM 编译过程对于开发者来说通常是透明的，但了解这些内部机制有助于更好地理解和优化应用程序。
如果你对 Vue 3 的内部实现感兴趣，可以查阅 Vue 3 的官方文档或阅读 Vue 3 的源码来深入了解这一过程。
Vue 3 中虚拟 DOM 的编译过程
1. 模板编译
在 Vue 3 中，模板编译主要由两个阶段组成：解析和优化。
- 解析阶段：Vue 3 的编译器会将模板字符串解析成一个抽象语法树 (Abstract Syntax Tree, AST)，这个树结构表示了模板的结构和内容。编译器会识别出模板中的各种指令（如
v-if,v-for,v-bind等）并将它们转换成对应的 AST 节点。 - 优化阶段：编译器会对 AST 进行优化，以减少不必要的计算和 DOM 操作。例如，它可以提前计算静态节点，并将其标记为静态的，这样在渲染时就不需要重新生成这些节点。
2. 生成渲染函数
一旦 AST 被创建并优化后，编译器会生成一个渲染函数，这个函数可以用来创建虚拟 DOM 节点（VNode）。渲染函数通常会利用 Vue 内置的 h 函数（createVNode 的别名）来创建 VNode。
3. 创建虚拟 DOM (VNode)
在 Vue 3 中，h 函数被用来创建 VNode。一个 VNode 是一个 JavaScript 对象，它包含了关于 DOM 节点的信息，如标签名、属性、子节点等。例如：
const vnode = h(
'div', // 标签名
{ id: 'app' }, // 属性对象
'Hello Vue 3!' // 子节点
);
4. 渲染到真实 DOM
当 VNode 被创建后，Vue 会使用高效的算法来比较新旧 VNode，并更新真实的 DOM。这个过程称为 patching。Vue 3 的 diff 算法旨在最小化 DOM 操作，从而提高性能。
今天来简单介绍一下如何将一份虚拟dom转成真实dom。
vdomToDom
虚拟dom结构已有，挂载到root节点上，请问如何实现render函数？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script>
const vnode = {
tag: 'div',
attrs: {
id: 'app',
class:'box'
},
children: [
{
tag: 'span',
children: [{
tag: 'a',
children: [],
}],
},
{
tag: 'span',
children: [{
tag: 'a',
children: [],
}]
}
]
}
render(vnode,document.getElementById('root'))
function render(vnode, container) {
}
</script>
</body>
</html>
我们先来看一眼这份虚拟dom长什么样。
首先最外层有个id为app类名为box的div，里面有两个子节点span，第一个子节点中又有一个a，第二个子节点中也有一个a
那么vue中编译dom的原理是什么，我们来一份简易版看看。
首先我们就想有一个方法只要给一个虚拟dom就能生成dom，然后将其挂载到root上去，接下来就是如何实现createDom
function render(vnode, container) {
const newDom = createDom(vnode)
container.appendChild(newDom)
}
function createDom(vnode) {
const { tag, attrs, children } = vnode
const dom = document.createElement(tag)
if (typeof attrs === 'object' && attrs !== null) {
updateProps(dom, {}, attrs) // 为dom添加属性
}
if (children.length > 0) {
reconcileChildren(children, dom) // 为dom添加子容器
}
return dom
}
然后思考，如何为子容器添加属性以及如何为容器添加子容器？
function updateProps(dom, oldProps = {}, newProps = {}) {
for (const key in newProps) {
if (key === 'style') {
let styleObj = newProps[key]
for (let attr in styleObj) {
dom.style[attr] = styleObj[attr]
}
} else { // id / class
dom[key] = newProps[key]
}
}
}
function reconcileChildren(children, dom) {
for (let child of children) {
render(child, dom)
}
}
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script>
const vnode = {
tag: 'div',
attrs: {
id: 'app',
className: 'box'
},
children: [
{
tag: 'span',
children: [{
tag: 'a',
children: [],
}],
},
{
tag: 'span',
children: [{
tag: 'a',
children: [],
}]
}
]
}
render(vnode, document.getElementById('root'))
function render(vnode, container) {
const newDom = createDom(vnode)
container.appendChild(newDom)
}
function createDom(vnode) {
const { tag, attrs, children } = vnode
const dom = document.createElement(tag)
if (typeof attrs === 'object' && attrs !== null) {
updateProps(dom, {}, attrs) // 为dom添加属性
}
if (children.length > 0) {
reconcileChildren(children, dom) // 为dom添加子容器
}
return dom
}
function updateProps(dom, oldProps = {}, newProps = {}) {
for (const key in newProps) {
if (key === 'style') {
let styleObj = newProps[key]
for (let attr in styleObj) {
dom.style[attr] = styleObj[attr]
}
} else { // id / class
dom[key] = newProps[key]
}
}
}
function reconcileChildren(children, dom) {
for (let child of children) {
render(child, dom)
}
}
</script>
</body>
</html>
效果
以上就是Vue3中虚拟dom转成真实dom的过程详解的详细内容，更多关于Vue3 虚拟dom转成真实dom的资料请关注脚本之家其它相关文章！
相关文章
vue3 实现关于 el-table 表格组件的封装及调用方法
这篇文章主要介绍了vue3 实现关于 el-table 表格组件的封装及调用方法,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-06-06
这篇文章主要介绍了Vue3之 Vue CLI多环境配置，通俗点说就是使用配置文件来管理多环境，实现环境的切换，西阿棉详细内容,需要的朋友可以参考一下2021-11-11
这篇文章主要介绍了vue如何实现跨页面传递与接收数组并赋值，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了vue使用vue-cli快速创建工程,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
今天小编就为大家分享一篇vue异步axios获取的数据渲染到页面的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了手写 Vue3 响应式系统(核心就一个数据结构),响应式就是被观察的数据变化的时候做一系列联动处理。就像一个社会热点事件，当它有消息更新的时候，各方媒体都会跟进做相关报道。这里社会热点事件就是被观察的目标2022-06-06
这篇文章主要给大家介绍了Vue3中el-table表格数据不显示的原因和解决方法,文中有详细的代码示例供大家参考,如果有遇到相同问题的朋友可以参考阅读本文,希望能够帮到您2023-11-11
这篇文章主要介绍了vue多页面配置，单页应用这个概念，是随着前几年 AngularJS、React、Ember 等这些框架的出现而出现的。在前面的前言内容里，我们在页面渲染中讲了页面的局部刷新,而单页应用则是使用了页面的局部刷新的能力,下面来看看详细内容,需要的朋友可以参考一下2021-11-11
这篇文章主要为大家详细介绍了Vue动态生成表格的行和列，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
本篇文章主要介绍了深入理解vue-router之keep-alive。keep-alive使被包含的组件保留状态，或避免重新渲染，有兴趣的可以了解一下2017-08-08
最新评论