Vue面试之虚拟DOM

2024-01-10 11:31:39


????最近在整理一些前端面试中经常被问到的问题,分为vue相关、react相关、js相关、react相关等等专题,可持续关注后续内容,会不断进行整理~

什么是虚拟dom?

????虚拟 DOM 是用 JavaScript 对象来模拟实际 DOM 结构的一种抽象表示。它描述了组件的结构、属性和事件等信息,但与实际的页面 DOM 元素无关。通过对真实 DOM 的抽象,虚拟 DOM 不依赖于特定平台环境,从而实现了跨平台能力。

????大多数前端框架都引入了虚拟 DOM,即 vnode(虚拟节点)和 vdom(虚拟 DOM),以提高性能。直接操作 DOM 元素效率较低,因此利用 diff 算法对虚拟 DOM 进行比较,然后更新实际 DOM,从而提高了效率。

虚拟dom是如何产生的?

????总的来说分为三个步骤:
① 编写模板template
② 编译器编译为渲染函数render
③ 挂载时调用render函数
生成虚拟dom过程图

编写模板template

????在vue中,都要为组件编写template模板,该模板使用类似HTML的语法,用来描述希望在页面上渲染的组件结构以及内容,模板中一般包含标签属性事件等信息;

模板编译Complie

????一旦将template模板编好,Vue的编译器(Compiler)会将模板编译成一个渲染函数(render function)。该渲染函数是一个js函数,即用于创建虚拟DOM,通常被称为createElement函数或简写为h函数

挂载Mounting

????在挂载过程中,Vue调用之前生成的渲染函数render,从而生成虚拟dom树,这个过程中主要起作用的是createElement函数。

总的来说,render函数产生虚拟dom

如何进行新旧Dom对比?

????在组件的状态(数据)发生变化时,Vue会重新调用渲染函数进而生成新的虚拟dom,通过使用diff算法对新旧虚拟dom比较,找出需要更新、新增或删除的虚拟dom元素,从而将这些差异应用到页面的dom元素中,这个比较计算的过程称为patch过程,在这个过程中,新的虚拟dom元素会被转化为真实dom元素,最后通过浏览器引擎渲染,将真实dom渲染到页面,用户就可以看到最终效果。

????总的来说,**patch过程转换为真实dom。**真实 DOM 渲染到页面的过程通常是由浏览器引擎负责的,而不是由前端框架(如Vue.js)直接控制。

文章来源:https://blog.csdn.net/ks795820/article/details/135496546
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。