049 生命周期挂载流程
页面挂载（Mounting）在Web开发的上下文中，特别是在使用Vue.js等现代JavaScript框架时，指的是将Vue实例连接到HTML文档中的特定元素上，使其能够控制该元素及其子元素的行为和显示的过程。
具体来说，Vue.js通过创建一个Vue实例，并使用该实例的el选项（或者通过Vue实例.$mount()方法）来指定要挂载的DOM元素（通常是HTML文档中的一个<div>元素）。一旦挂载成功，Vue实例就能够监视这个元素及其子元素的数据变化，并将这些变化实时反映到DOM中，同时也可以响应用户的交互操作。
这个过程之所以被称为挂载，是因为它借用了操作系统中挂载的概念，即将一个虚拟实体（在Vue中是Vue实例）与一个物理实体（在Web中是DOM元素）建立联系，使得虚拟实体能够控制物理实体的行为。
在Vue.js中，挂载通常发生在Vue实例创建之后，并且是在页面渲染到用户可见之前的一个重要步骤。通过挂载，Vue实例能够将模板中的虚拟DOM转换为真实的DOM，并将其插入到指定的挂载点中，从而实现了数据的双向绑定和动态渲染。
需要注意的是，挂载只是Vue.js生命周期中的一个阶段，Vue实例在挂载之后还会经历更新、卸载等阶段。在开发过程中，了解Vue.js的生命周期和各个阶段的作用是非常重要的，这有助于我们更好地控制Vue实例的行为和性能。
**
页面渲染（Page Rendering）在Web开发中指的是将HTML、CSS和JavaScript等代码转换为用户可以在浏览器上看到的视觉页面的过程。这个过程涉及多个步骤和组件的协同工作，以确保网页能够正确、高效地显示给用户。
具体来说，页面渲染的基本操作包括：
-
解析HTML：浏览器首先会解析HTML文档，构建DOM（Document Object Model）树。DOM树是网页内容的结构化表示，它包含了网页中所有的元素和它们之间的关系。
-
解析CSS：同时或随后，浏览器会解析CSS样式表，并构建CSSOM（CSS Object Model）树。CSSOM树包含了所有样式信息的结构化表示，用于确定网页上每个元素的最终样式。
-
构建渲染树：在DOM树和CSSOM树构建完成后，浏览器会将它们合并成一个渲染树（Render Tree）。渲染树只包含需要显示的节点和这些节点的样式信息，它是浏览器进行布局和绘制的依据。
-
布局（Reflow/Layout）：浏览器根据渲染树中的信息，计算每个节点的几何属性（如位置和大小），并将其放置在页面上的正确位置。这个过程称为布局或回流（Reflow）。
-
绘制（Repaint/Painting）：在布局完成后，浏览器会遍历渲染树，并使用最终的计算结果将元素绘制到屏幕上。这个过程称为绘制或重绘（Repaint）。
页面渲染的性能受到多种因素的影响，包括HTML和CSS的复杂度、JavaScript的执行效率、图片和资源的加载时间等。为了提高页面渲染的性能，开发者可以采取多种优化措施，如减少DOM操作、优化CSS选择器、使用懒加载和预加载等。
此外，在Vue.js等现代JavaScript框架中，页面渲染还涉及到虚拟DOM（Virtual DOM）的概念。虚拟DOM是一个轻量级的JavaScript对象，它是对真实DOM的抽象表示。Vue.js等框架通过比较新旧虚拟DOM的差异，并最小化对真实DOM的操作，来提高页面渲染的效率和性能。
**
