五、 视图渲染过程

本节目标：理解“五、 视图渲染过程”的核心思路，并能把它用于实际开发或面试表达。

说明：原 OneNote 中有图片引用，但图片未包含在导出目录中；本页保留了可用的文字与代码内容。

Dom => virtual DOM => render functions
**1.** **什么是****Dom** **、****Document Object Model**

HTML在浏览器中会映射为一些列节点，方便我们去调用。

2. 什么是虚拟****Dom Dom中节点众多，直接查询和更新Dom性能较差。 A way of representing the actual DOM with JavaScript Objects. 用JS对象重新表示实际的Dom

**3.** **什么是渲染函数**
在Vue中我们通过将视图模板(template)编译为渲染函数(render function)再转化为虚拟Dom

**4.** **通过****DomDiff****高效更新视图**

**5.** **总结**
举个栗子🌰 虚拟Dom和Dom就像大楼和大楼设计图之间的关系。

假设你要在29层添加一个厨房 ❌ 拆除整个29层，重新建设 ✅先绘制设计图，找出新旧结构不同然后建设