首页 > IDC报告 > 正文

请你阐述一下对vue虚拟dom的理解

面试题:请详细说说你对vue virtual dom的理解

1. 什么是虚拟 dom?

虚拟dom本质上就是一个普通的JS对象,用来描述视图的接口结构如下:

{
tag: 'div',
props: {
  id: 'app'
},
chidren: [
  {
    tag: 'p',
    props: {
      className: 'text'
    },
    chidren: [],
    text: 'hello world!!!'
  }
]
}
复制代码

生成的html代码是这样的:

hello world!!!

兰州虚拟养老餐厅目录_什么是虚拟目录_环球影城禁忌之旅是虚拟吗

在vue中,每个组件实际上都被vue编译成一个vNode(虚拟dom),每个组件都有一个render函数,每个render函数返回一个虚拟dom树,也就是说每个组件对应一个虚拟dom树

image-20210225140726003

2. 为什么我们需要虚拟 dom?

在 Vue 中,渲染视图会调用渲染函数。这种渲染不仅在组件创建时发生,在视图依赖的数据更新时也会发生。如果渲染时直接使用真实DOM,真实DOM的创建、更新、插入都会造成很大的性能损失,大大降低渲染效率。

下面简单测试一下,创建等量的js对象和等量的dom对象,看看花费了多少时间。

image.png

环球影城禁忌之旅是虚拟吗_什么是虚拟目录_兰州虚拟养老餐厅目录

普通对象,数组中放入10w个对象,消耗时间40ms

image.png

创建一个普通的dom对象,放入数组中,耗时132s;大约是普通物体的4倍

因此,在上面的例子中,从对象的创建可以看出,创建真正的dom需要时间。这只是最初的创作。如果真实dom在更新过程中频繁更新,也会引起浏览。浏览器的重绘和浏览器的重排,用虚拟dom代替真实dom,主要解决渲染效率问题

3. 虚拟dom是如何转换成真实dom的?

当一个组件实例第一次被渲染时,它首先生成一个虚拟dom树,然后根据虚拟dom树创建一个真实dom,并将真实dom挂载到页面上合适的位置。这时候,每一个虚拟的dom都会对应一个真实的dom。

兰州虚拟养老餐厅目录_环球影城禁忌之旅是虚拟吗_什么是虚拟目录

image.png

如果一个组件受到响应数据变化的影响需要重新渲染,它仍然会再次调用渲染函数来创建一个新的虚拟 dom 树,并将新树与旧树进行比较。通过比较,vue会找到最小更新量,然后更新必要的虚拟dom节点,最后这些更新的虚拟节点会替换它们对应的真实dom

通过这种方式,可以保证对真实 dom 的更改最少。

image-20210225144108143

通过这个,我们可以知道虚拟dom不一定比真实dom快。我们刚创建的时候,又生成了一个虚拟dom,直接挂载了我的真实dom,然后就有了如果页面结构简单什么是虚拟目录,真实dom也比虚拟dom快!

4. 模板与虚拟dom的关系

什么是虚拟目录_兰州虚拟养老餐厅目录_环球影城禁忌之旅是虚拟吗

vue框架中有一个compile模块,主要负责将模板转换成render函数,调用render函数后会得到虚拟dom。

编译过程分为两步:

将模板字符串转换为 AST 并将 AST 转换为渲染函数

如果使用传统的导入方式什么是虚拟目录,编译时间发生在组件第一次加载时,称为运行时编译。

如果是在vue-cli的默认配置下,打包时会进行编译,称为模板预编译。

编译是一个非常消耗性能的操作。预编译可以有效提高运行时性能。而且,由于运行时不再需要编译,vue-cli在打包时会排除vue中的编译模块,以减少打包体积。

兰州虚拟养老餐厅目录_环球影城禁忌之旅是虚拟吗_什么是虚拟目录

模板的存在,只是为了方便开发者编写界面代码

当 vue 最终运行时,需要的是渲染函数,而不是模板。因此,模板中的各种语法在虚拟dom中是不存在的,它们都会成为虚拟dom的配置。

5. 扩展

说到虚拟dom,其实vue也是指一个虚拟dom库(snabbdom)的更新操作。

image.png

看到上面的h,是不是觉得很眼熟?如果您熟悉它,请对其进行操作并集成源代码。

【版权与免责声明】1、凡本站注明来源非"idc评述网"的所有文章均为网友转载,涉及言论、版权与本站无关。任何第三方转载使用时必须保留本站注明的文章来源,并自负法律责任。2、idc评述网对文中陈述、观点判断保持中立,不对所包含内容的准确性、可靠性或完整性提供任何明示或暗示的保证。如涉嫌侵权请联系:service@idcps.com。

相关热词搜索:什么是虚拟目录 环球影城禁忌之旅是虚拟吗 兰州虚拟养老餐厅目录

文章点评

暂无点评

点评