Vue 生态

约 770 字大约 3 分钟

VoidZero 下一代Web工具-我们的使命是让网络开发人员比以往任何时候都更有效率。

虚拟 DOM

虚拟 DOM 本质就是一个普通的 JS 对象，用于描述视图的界面结构

在 vue 中，每个组件都有一个render函数，每个render函数都会返回一个虚拟 dom 树，这也就意味着每一个组件都对应一颗虚拟 DOM 树

在vue中，渲染视图会调用render函数，这种渲染不仅发生在组件创建时，同时发生在视图依赖的数据更新时。如果在渲染时，直接使用真实 DOM，由于真实 DOM 的创建、更新、插入等操作会带来大量的性能损耗，从而就会极大的降低渲染效率。

因此，vue 在渲染时，使用虚拟 dom 来替代真实 dom，主要为解决渲染效率的。

在一个组件实例首次被渲染时，它先生成虚拟 dom 树，然后根据虚拟 dom 树创建真实 dom，并把真实 dom 挂载到页面中合适的位置，此时，每个虚拟 dom 便会对应一个真实的 dom。

如果一个组件受到响应式数据变化的影响，需要重新渲染时，它仍然重新调用render函数，创建出一个新的虚拟 dom 树，用新树和旧树对比，vue 会找到最小更新量，然后更新必要的虚拟 dom 节点，最后这些更新过的虚拟节点，会去修改它们对应的真实 dom

这样一来，就保证了对真实 dom 达到最小的改动。

vue 框架中有一个 compile模块，它负责将模板转换为render函数，而render函数调用后将得到虚拟 dom。

编译的过程分为两步：

AST：抽象语法树

如果使用传统的引入方式或vue-clie的配置中开启了runtimeCompiler: true，则编译时间发生在组件第一次加载时，这称之为运行时编译。

如果是在vue-cli默认配置下，编译发生在打包时，这称之为模板预编译。

编译是一个极其耗费性能的操作，预编译可以有效的提高运行时的性能，而且，由于运行的时候已不需要编译，vue-cli在打包时会排除掉 vue 中的 compile 模块，以减少打包体积

模板的存在，仅仅是为了让开发人员更加方便的书写界面代码

vue 最终运行的时候，需要的是 render 函数，而不是模板，因此，模板中的各种语法，在虚拟 dom 中都是不存在的，它们都会变成虚拟 dom 的配置