2021-05-05

VUE中的虚拟DOM

---

什么是虚拟dom

虚拟dom本质上就是一个普通的js对象，在vue中，每个组件都有一个render函数，调用render函数会返回一个虚拟dom树，因此，每个组件都对应着一个虚拟dom树

---

为什么要用到虚拟dom

在vue中，渲染视图需要调用render函数，不仅在第一次渲染虚拟dom转换成真实dom时，并且还会发生在视图依赖更新时会渲染；由于真实dom的创建、更新等操作会给性能带来大量的损耗，降低渲染的效率，因此，在vue中，使用虚拟dom代替真实dom，更好的解决渲染效率问题。

虚拟dom如何转换成真实dom

在一个组件实例第一次被渲染时候，它会通过render函数生成虚拟dom，然后根据虚拟dom创建真实dom，把真实dom挂载到浏览器页面上，每个虚拟dom都有对应的真实dom。


当组件发生在视图依赖更新时，它会重新调用render函数，生成新的虚拟dom，并且与之前的虚拟dom对比，把需要更新的dom节点创建新的dom节点，并且更新真实dom节点。

模板与虚拟dom

vue框架中有一个compile模块，它主要负责将模板转换成render函数，并且调用render函数返回虚拟dom。

• compile模块编译过程：
• 将模版字符串转换成AST(抽象语法树)
• 将AST转换为render函数

如果使用传统src引入方式，在代码运行时会编译，这个编译时间称为运行时编译（runtimeCompile）
如果在vue-cli下，在打包时则会发生编译，称为模板预编译 （预编译可以有效的提高运行时的性能，而且在vue-cli打包时不会加入compile模块，减少打包体积）

---

总结

vue运行的时候，需要的是render函数，生成虚拟DOM树，再转换成真实DOM节点渲染页面，compile模块在虚拟dom中都是不存在的，它会变成虚拟dom的配置。