vue的虚拟DOM会操作DOM吗?,vue的虚拟dom和react的虚拟dom
本文主要介绍Python合成Excel表格的实现代码(多表)。这篇文章给大家讲的很详细，对大家的学习或者工作都有一定的参考价值。有需要的朋友可以参考一下。
目录
一、什么是虚拟dom？二、为什么需要虚拟dom？三、虚拟dom如何转化为真实dom？第四，模板和虚拟dom的关系。
一、什么是虚拟dom？
虚拟dom本质上是一个普通的JS对象，用来描述视图的接口结构。
在vue中，每个组件都有一个渲染功能，
如果没有要查找的渲染模板，就没有要查找的el模板。如果有el，el.outHTML会作为模板，然后这个字符串会被编译成一个渲染函数。
有模板就不会往下看。和render原理是一样的。
每个渲染函数返回一个虚拟dom树，这意味着每个组件对应一个虚拟DOM树。
也就是说render的目的是创建虚拟dom，这个组件要显示什么。
console . log( render )；
题外话：console.dir()可以显示一个对象的所有属性和方法。
如果没有返回，此时页面中没有真正的dom。
添加退货
h函数名是用户自定义的，h函数结构，h(标签，{自身属性}，[子元素])
子元素继续用H函数构建，因为还有其他属性。
让我们在[]中创建另一个子元素
h函数做出判断。如果它不是一个对象，它就是一个文本节点。认为省略了中间配置。
将其呈现在页面中。
console . log(vnode)；
H1子元素
对应于真实节点。榆树。
H (h1 ， {{title}} )这个肯定不行，一定是h (h1 ，这个。标题)
二、为什么需要虚拟dom
在vue中，呈现一个视图会调用render函数，这个函数不仅在组件创建时发生，而且在视图所依赖的数据更新时也会发生。如果直接使用真实DOM进行渲染，那么真实DOM的创建、更新和插入都会带来很大的性能损失，会大大降低渲染效率。
所以vue在渲染中使用虚拟dom而不是真实dom，主要是为了解决渲染效率的问题。
第一次加载的时候生成真正的dom是没有问题的，因为生成真正的dom是不可避免的，也是必须的。
render函数不只生成一次，而是在每次数据更改时生成。
但是如果每次在render中使用createElement来生成全新的dom元素，代价就太大了。
三、虚拟dom是如何转换为真实dom的
当组件实例第一次呈现时，它被构建到一个虚拟dom树中，深度首先遍历节点并设置属性。然后根据虚拟dom树，创建一个真实dom，把真实dom挂载到页面上合适的位置，直接替换div#app。此时，每个虚拟dom将对应一个真实dom。
不等于，因为直接替换了div#app。
如果组件受到响应数据更改的影响，需要重新呈现，它仍然会再次调用render函数来创建新的虚拟dom树，并将新树与旧树进行比较。经过比较，vue会找到最小的更新量，然后更新必要的真实dom节点。
这样，保证了对真实dom的最小改变。
通过diff算法，可以看出两个虚拟dom是不同的，然后改变对应节点的真实dom完成效果，保证变化最小，提高效率。
四、模板和虚拟dom的关系
脚手架搭建的虚拟dom
vue框架中有一个编译模块，主要负责将模板转换成渲染函数，渲染函数被调用后会得到一个虚拟的dom。
编译过程分为两步，(babel和webpack都是这样创建的):
将模板字符串转换成AST(抽象语法树，用树形结构描述我们的事物)，将AST转换成render函数。
AST，提一下。AST是用堆栈构建的
如果使用传统的引入方法(src ),编译时间发生在组件第一次加载时，称为运行时编译。再多说一句，第一步很费时间。
如果在vue-cli的默认配置下，编译发生在打包期间，这称为模板预编译。
编译是一项非常消耗性能的操作。预编译可以有效地提高运行时的性能。此外，由于在运行时不再需要编译，vue-cli将在打包时排除vue中的编译模块，以减少打包体积。
如果模板上没有写模板
将会报告错误，但是您可以在vue.config.js中进行配置
module . export={ runtime compiler:true }
不会，会加入编译过的内容，让内容更丰富。(再提一下esbuild和vite加速打包。)?未使用)
模板的存在只是为了让开发人员更容易编写接口代码vue最终运行的时候，最终需要的是render函数，而不是模板，因此，模板中的各种语法，在虚拟dom中都是不存在的，它们都会变成虚拟dom的配置。
等同于
案例：自动生成目录
现在你需要制作一个组件，它可以根据其槽中的内容自动生成一个目录。
关于Vue虚拟dom的这篇文章到此为止。更多关于Vue虚拟dom的信息，请搜索我们之前的文章或者继续浏览下面的相关文章。我希望你将来能支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。