VUE 页面渲染过程
当一个 Vue 组件被创建并挂载到 DOM 中时，Vue.js 会执行以下渲染过程：
-
解析模板：Vue.js 将模板解析成抽象语法树（AST），这个过程包括以下步骤：
a. 词法分析：将模板字符串分解为有意义的标记（tokens）。
b. 语法分析：将标记解析为 AST。
-
编译模板：Vue.js 将 AST 编译为渲染函数，这个过程包括以下步骤：
a. 优化：对 AST 进行优化，如静态节点提取和作用域分析。
b. 代码生成：将 AST 转换为可执行的 JavaScript 代码，即渲染函数。
-
创建虚拟 DOM：Vue.js 通过执行渲染函数创建虚拟 DOM（Virtual DOM），即一个轻量级的 JavaScript 对象树。虚拟 DOM 包含了所有的节点及其属性和子节点，但不包含任何实际的 DOM 操作。
-
将虚拟 DOM 渲染为真实 DOM：Vue.js 会将虚拟 DOM 渲染为真实的 DOM，并将其插入到页面中。这个过程通常称为“挂载”。
-
响应式更新：当组件中的数据发生变化时，Vue.js 会自动触发响应式系统，重新计算组件的虚拟 DOM 树。
-
对比虚拟 DOM：Vue.js 将新的虚拟 DOM 和旧的虚拟 DOM 进行对比，找出两者之间的差异。这个过程称为 Virtual DOM Diff。这个过程会比较新旧虚拟 DOM 的节点及其属性，找出需要更新的节点，并生成一份更新列表。
-
更新 DOM：Vue.js 将差异更新到真实 DOM 中，这个过程称为 DOM Patch。在 DOM Patch 过程中，Vue.js 会将需要更新的节点及其属性从虚拟 DOM 中复制到真实 DOM 中，如果需要删除节点或添加节点，Vue.js 会调用相应的 DOM 操作函数。
-
完成渲染：当 Vue.js 将虚拟 DOM 中的差异更新到真实 DOM 中之后，视图的渲染工作就完成了。
