本文主要为大家介绍Javascript虚拟DOM，有一定的参考价值。感兴趣的朋友可以参考一下，希望能帮到你。
目录
什么是虚拟dom？为什么需要虚拟dom？虚拟dom是如何转化为真实dom的？模板和虚拟dom关系注入和挂载的完整过程总结
什么是虚拟 dom？
虚拟dom本质上是一个普通的JS对象(这个。_vnode打印在mounted中是这个对象的内容)，用来描述视图的接口结构。
在vue中，每个组件都有一个渲染函数，每个渲染函数都会返回一棵虚拟dom树，也就是说每个组件对应一棵虚拟DOM树。
Vnode是一个普通的JS对象，用来描述界面上应该有什么，比如：
var vnode={
标签:“h1”，
儿童：[
{tag: undefined，text:'第一个vue应用程序：Hello World'}
]
}
上面的对象描述了：
有一个名为h1的节点，它有一个子节点，是一个文本，内容为“第一个vue应用：Hello World”
为什么需要虚拟dom？
在vue中，呈现一个视图会调用render函数，这个函数不仅在组件创建时发生，而且在视图所依赖的数据更新时也会发生。如果直接使用真实DOM进行渲染，那么真实DOM的创建、更新和插入都会带来很大的性能损失，会大大降低渲染效率。
所以vue在渲染中使用虚拟dom而不是真实dom，主要是为了解决渲染效率的问题。
对比创建js对象和真实 dom 对象效率：
结果：
创建一个真正的dom伴随着创建许多属性。
虚拟dom是如何转换为真实dom的？
一个组件实例在第一次渲染的时候，会变成一棵虚拟dom树，然后根据虚拟dom树创建一个真实dom，把真实dom挂载到页面上合适的位置。此时，每个虚拟dom将对应一个真实dom。如果页面只会刷新一次，后期不会出现数据更新等问题，那么使用虚拟dom的效率不如直接显示真实dom。
如果一个组件受到响应数据变化的影响，需要重新渲染，它仍然会再次调用render函数，创建新的虚拟dom树，将新树与旧树进行比较，通过比较找出差异，然后只更新差异的虚拟dom节点。最后，这些更新的虚拟节点将修改它们对应的真实dom。
这样，保证了对真实dom的最小改变。
模板和虚拟dom的关系
Vu框架中有一个编译模块，主要负责将模板转换成渲染函数，渲染函数被调用后会得到虚拟dom。
编译的过程分两步：
1.将模板字符串转换成AST(抽象语法树：用js树结构来描述我们的原始代码；在线工具：https://astexplorer.net/)
2.将AST转换为渲染函数
vue 模板并不是真实的 DOM，它会被编译为虚拟 DOM
div id='应用程序'
H1第一个vue应用程序：{{title}}/h1
p作者：{{author}}/p
/div
上面的模板会被编译为类似下面结构的虚拟 DOM
{
标签:“div”，
儿童：[
{标签:' h1 '，孩子：[{text:'第一个vue应用：Hello World'}]}，
{tag: 'p '，孩子：[{text:'作者：袁' }]}
]
}
如果传统的介绍方法(script src='.vue.js ')时，编译时间发生在首次加载组件时，这称为运行时编译。
如果是在vue-cli的默认配置下，并且编译发生在打包的时候(npm run build)，打包之后除了render函数就没有模板了，这就叫模板预编译。
编译是一项非常消耗性能的操作。预编译可以有效地提高运行时的性能。此外，由于在运行时不再需要编译，vue-cli将在打包时排除vue中的编译模块，以减少打包体积。
打包时是否需要包含编译模块由runtimeCompiler控制：vue.config.js中为true，默认为false，但不包含。不建议更改此配置。
模板的存在只是为了让开发人员更容易编写接口代码。
vue最终运行的时候，最终需要的是render函数，而不是模板，因此，模板中的各种语法，在虚拟dom中都是不存在的，它们都会变成虚拟dom的配置
在vue-cli中，如果模板和render同时存在，由于一个打包过程，模板的预编译会生成render来覆盖原来的render函数。
在vue中，如果模板和渲染都存在，渲染必须优先。
虚拟DOM树最终将被生成为真实的DOM树。
vue通过以下逻辑生成vnode tree：
注意：虚拟节点树必须是单根的。
注入
vue会将以下配置注入到vue实例：
数据：与接口相关的数据。
Computed:根据已有数据计算出来的数据，以后会详细说明。
方法：方法
vue实例中的成员可以在模板中使用。
以防止名称冲突。因为data中的数据会被表示给vue，如果我们自己写的数据名和vue中的属性冲突，会覆盖到vue的内部属性，所以vue会在内部属性成员名前面加上or，比如“yes”或者“_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
挂载
生成的真实DOM树放在一个元素位置，这个位置叫做挂载。
挂载的方式：
1.通过el配置：“css选择器”
2.通过vue实例进行配置。$ mount ("CSS选择器")
完整流程
创建的实例：新Vue()
注射完成后会有响应，可以监控数据变化。
编译虚拟DOM树：首先，找到渲染函数；如果没有，找到生成渲染的模板；最后，运行render来生成虚拟DOM树。
挂载：显示在页面上
摘要
本文到此为止。希望能帮到你，也希望你能多关注我们的更多内容！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。