当前位置：首页 > news >正文

Vue3应用执行流程详解

news 2025/9/14 12:22:23

精确化的完整执行流程 (以 Vite + Vue3 SPA 为例)

整个过程可以分为两部分：首次访问的“冷启动”和后续的Vue应用接管。

第一部分：首次访问与页面加载

客户端：发送请求
- 用户打开浏览器，输入 URL（如 http://localhost:5173）。
- 浏览器向该地址的服务器（这里是 Vite 开发服务器）发送一个对根路径 / 的 GET 请求。
服务端 (Vite Dev Server)：接收并处理请求
- Vite 开发服务器接收到请求。它发现请求的是 /，于是它会返回预先配置好的 index.html 文件。
- 关键点：这个 index.html 文件不是直接执行的，而是由服务器读取后作为响应体返回给浏览器。
客户端：接收响应，开始解析 HTML
- 浏览器接收到服务器返回的 index.html 文件内容。
- 浏览器开始解析这个 HTML 文档。
客户端：加载并执行 HTML 中的资源
- 解析到 <script type="module" src="/src/main.ts"></script> 时，浏览器会向 Vite 开发服务器请求这个模块文件。
- Vite 服务器收到对 /src/main.ts 的请求，它会做一系列厉害的事情：
  - 编译转换：即时（On-the-fly）将你的 main.ts 以及它导入的 .vue 单文件组件等浏览器无法直接识别的模块，转换成标准的、浏览器可执行的 ES 模块。
  - 返回JS：将转换后的 JavaScript 代码返回给浏览器。
- 浏览器接收到编译后的 main.ts 代码并开始执行。
客户端：执行 main.ts，创建 Vue 应用实例
- main.ts 中的代码开始运行：
  - import { createApp } from 'vue'：请求并导入 Vue 的 createApp 方法。
  - import App from './App.vue'：请求并导入根组件 App.vue（Vite 会将其编译为一个JavaScript对象）。
  - import './style.css'：请求并导入CSS，浏览器会将其注入到页面中。
  - createApp(App).mount('#app')：
    - createApp(App)：使用根组件 App 的定义，创建 Vue 应用实例。
    - .mount('#app')：挂载应用。Vue 会找到 index.html 中的 <div id="app"></div> 元素，然后开始编译 App.vue 的模板，生成虚拟DOM，最终将渲染好的内容替换掉这个挂载点。
客户端：应用启动，渲染页面
- Vue 应用实例开始运行。它会根据 App.vue 和其子组件的逻辑、数据状态，生成最终的 DOM 结构，并输出到页面上。
- 用户看到登录页面（或首页）。

第二部分：应用运行与交互 (SPA 的核心)

客户端：Vue 应用接管后续所有交互
- 至此，整个 Vue 应用已经完全运行在浏览器中。
- 当用户点击页面上的路由链接（如 <router-link to="/about">）时，浏览器不会再向服务器发送新的页面请求。
- 取而代之的是，客户端的 Vue Router 会拦截这些交互，根据路由配置动态地切换和渲染不同的组件，并仅更新页面中需要变化的部分。
- 任何数据获取都通过 axios 或 fetch 等 API 向后台服务器发送 Ajax 请求来完成。

另一种模式：服务端渲染 (SSR)

如果你的应用使用了 Nuxt.js 或 vue-ssr 进行了服务端渲染，流程会完全不同，会更接近你最初列表中的想象：

浏览器请求 URL。
服务器（Node.js）接收到请求。
服务器真的执行 Vue 代码，调用 createSSRApp()，将组件渲染成完整的 HTML 字符串。
服务器将这个已经包含内容的 HTML 字符串直接塞进 index.html 里，然后返回给浏览器。
浏览器立刻就能看到渲染好的页面（利于SEO和首屏加载）。
同时，Vue 应用所需的JavaScript（客户端激活脚本）也会加载，然后在浏览器中“接管”这个静态页面，使其变成一个动态的 SPA。

总结

步骤	SPA (Vite 开发模式)	SPA (构建后)	SSR (如 Nuxt.js)
1. 请求处理	Vite 开发服务器返回空的 `index.html`	Nginx 返回空的 `index.html`	Node.js 服务器执行 Vue，渲染出带内容的 HTML
2. 内容渲染	浏览器执行 JS，Vue 在客户端渲染	浏览器执行 JS，Vue 在客户端渲染	服务器渲染好HTML，浏览器直接显示
3. 后续交互	客户端路由，无刷新切换组件	客户端路由，无刷新切换组件	客户端激活后，变为无刷新切换