Vue虚拟DOM原理及面试题（笔记）

Vue虚拟DOM原理及面试题（笔记）

面试题：请你阐述一下对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达到最小的改