编译过程：template -> ast -> render 函数 -> 创建虚拟 DOM -> diff 算法更新虚拟 DOM ->产生、更新真实 DOM
Vue 的单页应用（SPA）中，.vue 单文件组件（SFC）的编译流程是将 .vue 文件转换为可在浏览器中运行的 JavaScript 代码的核心过程
.vue 文件包含模板（<template>）、脚本（<script>）、样式（<style>）三部分，其编译流程可分为构建时编译和运行时渲染两个阶段，核心目标是将 SFC 转换为组件选项对象（如 render 函数、data、methods 等）。
1. 构建时编译（依赖构建工具如 Webpack/Vite）
这一阶段由 vue-loader（Webpack）或 @vitejs/plugin-vue（Vite）主导，将 .vue 文件拆分为三部分并分别处理：
拆分 SFC 块：解析
.vue文件，分离出<template>、<script>、<style>三个代码块。各自编译处理：
模板（template）：
通过
vue-template-compiler（Vue 2）或@vue/compiler-sfc（Vue 3）将模板字符串编译为render函数（虚拟 DOM 描述代码）。例如：<div></div>会被编译为类似h('div', [ctx.msg])的函数（Vue 3 中为createVNode）。脚本（script）：
通过 Babel 等工具将 ES6+ 语法转换为浏览器兼容的 JavaScript，提取组件选项（
export default { data, methods, ... }）。样式（style）：
若指定
scoped或module，会通过postcss处理（如添加作用域哈希类名），再由css-loader、style-loader等转换为可注入页面的样式。
整合为组件模块：
将编译后的
render函数、脚本导出的选项、样式引用整合为一个 JavaScript 模块，最终导出一个 Vue 组件对象。
2. 运行时渲染（浏览器中执行）
- 编译后的组件模块被引入并注册到 Vue 应用中。
- 当组件被渲染时，Vue 执行其
render函数生成虚拟 DOM。 - 虚拟 DOM 经过 diff 算法对比后，转换为真实 DOM 并挂载到页面
编译过程
- 解析是将
.vue 文件解析为 template、script 和 style 三个部分 - 编译是指将
template编译为渲染函数
参考
贡献者
chenjie