定义
- SPA 单页面应用（SinglePage Web Application），指只有一个主页面的应用，一开始只需要加载一次 js、css 等相关资源。所有内容都包含在主页面，对每一个功能模块组件化。单页应用跳转，就是切换相关组件，仅仅刷新局部资源
- MPA 多页面应用 （MultiPage Application），指有多个独立页面的应用，每个页面必须重复加载 js、css 等相关资源。多页应用跳转，需要整页资源刷新
区别
| 对比项/模式 | SPA | MPA |
|---|---|---|
| 结构 | 一个主页面+许多模块的组件 | 许多完整的页面 |
| 体验 | 页面切换快，体验佳；当初次加载文件过多时，需要做相关的调优 | 页面切换慢，网速慢的时候体验不好 |
| 资源文件 | 组件公用的资源只需要加载一次 | 每个页面都要自己加载公用的资源 |
| 适用场景 | 对体验度和流畅度有较高要求的应用，不利于SEO(可借助SSR优化) | 适用于对SEO应用较高的应用 |
| 过渡动画 | Vue提供了transition的封装组件，容易实现 | 很难实现 |
| 内容更新 | 相关组件的切换，即局部更新 | 整体HTML的切换，费钱(重复的http请求) |
| 路由模式 | 可以使用hash，也可以使用history | 普通链接跳转 |
| 数据传递 | 使用全局变量就好(Vuex) | cookie、localStorage等缓存方案、URL参数、调用接口保存等 |
| 相关成本 | 前期开发成本较高，后期维护较为容易 | 前期开发成本低，后期维护就比较麻烦，因为可能一个功能需要改很多地方 |
-------------------------------------------------------------------------------2024.5.26每日一题
