Vue面试之虚拟DOM
- 什么是虚拟dom？
- 虚拟dom是如何产生的？
- 编写模板template
- 模板编译Complie
- 挂载Mounting
- 如何进行新旧Dom对比？
最近在整理一些前端面试中经常被问到的问题，分为vue相关、react相关、js相关、react相关等等专题，可持续关注后续内容，会不断进行整理~
什么是虚拟dom？
虚拟 DOM 是用 JavaScript 对象来模拟实际 DOM 结构的一种抽象表示。它描述了组件的结构、属性和事件等信息，但与实际的页面 DOM 元素无关。通过对真实 DOM 的抽象，虚拟 DOM 不依赖于特定平台环境，从而实现了跨平台能力。
大多数前端框架都引入了虚拟 DOM，即 vnode（虚拟节点）和 vdom（虚拟 DOM），以提高性能。直接操作 DOM 元素效率较低，因此利用 diff 算法对虚拟 DOM 进行比较，然后更新实际 DOM，从而提高了效率。
虚拟dom是如何产生的？
总的来说分为三个步骤：
① 编写模板template
② 编译器编译为渲染函数render
③ 挂载时调用render函数
编写模板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）直接控制。
