Vue 生态
约 770 字大约 3 分钟
Vue 生态
虚拟 DOM
1、什么是虚拟 dom?
虚拟 DOM 本质就是一个普通的 JS 对象,用于描述视图的界面结构
在 vue 中,每个组件都有一个render
函数,每个render
函数都会返回一个虚拟 dom 树,这也就意味着每一个组件都对应一颗虚拟 DOM 树
2、为什么需要虚拟 dom?
在vue
中,渲染视图会调用render
函数,这种渲染不仅发生在组件创建时,同时发生在视图依赖的数据更新时。如果在渲染时,直接使用真实 DOM,由于真实 DOM 的创建、更新、插入等操作会带来大量的性能损耗,从而就会极大的降低渲染效率。
因此,vue 在渲染时,使用虚拟 dom 来替代真实 dom,主要为解决渲染效率的。
3、虚拟 dom 是如何转化为真实 dom 的?
在一个组件实例首次被渲染时,它先生成虚拟 dom 树,然后根据虚拟 dom 树创建真实 dom,并把真实 dom 挂载到页面中合适的位置,此时,每个虚拟 dom 便会对应一个真实的 dom。
如果一个组件受到响应式数据变化的影响,需要重新渲染时,它仍然重新调用render
函数,创建出一个新的虚拟 dom 树,用新树和旧树对比,vue 会找到最小更新量,然后更新必要的虚拟 dom 节点,最后这些更新过的虚拟节点,会去修改它们对应的真实 dom
这样一来,就保证了对真实 dom 达到最小的改动。
4、模板和虚拟 dom 的关系?
vue 框架中有一个 compile
模块,它负责将模板转换为render
函数,而render
函数调用后将得到虚拟 dom。
编译的过程分为两步:
- 将模板字符串转为 AST
- 将 AST 转换为
render
函数
AST:抽象语法树
如果使用传统的引入方式或vue-clie
的配置中开启了runtimeCompiler: true
,则编译时间发生在组件第一次加载时,这称之为运行时编译。
如果是在vue-cli
默认配置下,编译发生在打包时,这称之为模板预编译。
编译是一个极其耗费性能的操作,预编译可以有效的提高运行时的性能,而且,由于运行的时候已不需要编译,vue-cli
在打包时会排除掉 vue 中的 compile 模块,以减少打包体积
模板的存在,仅仅是为了让开发人员更加方便的书写界面代码
vue 最终运行的时候,需要的是 render 函数,而不是模板,因此,模板中的各种语法,在虚拟 dom 中都是不存在的,它们都会变成虚拟 dom 的配置