如何理解vue中的SPA和MPA

本篇文章给大家分享的是有关如何理解vue中的SPA和MPA，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

什么是SPA

SPA 全称 Single Page Application，即单页面应用。一般也称为 CSR（Client Side Render），即客户端渲染。它所需的资源，如 HTML、CSS 和 JS 等，在一次请求中就加载完成，也就是不需刷新地动态加载。浏览器(Client)渲染顾名思义就是所有的页面渲染、逻辑处理、页面路由、接口请求均是在浏览器中发生。对于 SPA 来说，页面的切换就是组件或视图之间的切换。

简单来说,SPA应用程序只有一个html文件,在vue中可以通过vue-router来局部切换组件,而非刷新整个页面,来实现无刷新切换页面的技术

SPA应用程序避免了由于在服务器上呈现页面而导致的中断。 这消除了 Web 开发世界在提供无缝用户体验方面通常面临的最大问题。

SPA的原理

js会感知到url的变化，通过这一点可以用js监听url中hash值的变化,通过onhashchange事件,由于哈希值的变换并不会引发页面的刷新和跳转,当监听到hash变化,就可以动态的切换组件,就可以实现无刷新切换页面技术

• 注意. 在vue-router中 vue不支持onhashchange事件,它希望你使用vue-router中的钩子函数解决

SPA的优点

• 页面切换快

页面每次切换跳转时，并不需要做html文件的请求，这样就节约了很多http发送时延，我们在切换页面的时候速度很快。

• 用户体验好

页面片段间的切换快，包括移动设备, 尤其是在网络环境差的时候, 因为组件已经预先加载好了, 并不需要发送网络请求, 所以用户体验好

SPA的缺点

• 首屏加载速度慢

首屏时需要请求一次html，同时还要发送一次js请求，两次请求回来了，首屏才会展示出来。相对于多页应用，首屏时间慢。

• 不易于SEO

SEO效果差，因为搜索引擎只认识html里的内容，不认识js的内容，而单页应用的内容都是靠js渲染生成出来的，搜索引擎不识别这部分内容，也就不会给一个好的排名，会导致SPA应用做出来的网页在百度和谷歌上的排名差。

什么是MPA

MPA多页面应用 MultiPage Application ，指有多个独立页面的应用（多个html页面），每个页面必须重复加载js、css等相关资源。多页应用跳转，需要整页资源刷新。

与 SPA 对比最大的不同即是页面路由切换由原生浏览器文档跳转（navigating across documents）控制。页面跳转，是返回 HTML 的。

MPA的优点

• 首屏加载速度快

当我们访问页面的时候，服务器返回一个html，页面就会展示出来，这个过程只经历了一个HTTP请求，所以页面展示的速度非常快。

• SEO效果好

搜索引擎在做网页排名的时候，要根据网页的内容才能给网页权重，来进行网页的排名。搜索引擎是可以识别html内容的，而我们每个页面所有的内容都放在html中，所以这种多页应用SEO排名效果好。

MPA的缺点

• 页面切换慢

因为每次跳转都需要发送一个 HTTP 请求，如果网络状态不好，在页面之间来回跳转时，就会发生明显的卡顿，影响用户体验。

• 用户体验不佳

如果网络慢,页面很容易半天加载不出来,用户体验非常不好

为什么要使用SPA应用开发

通过上面的分析,我们不难发现,SPA和MPA各有优缺点,那我们为什么还要开发SPA呢,其实,Vue还提供了一些其它的技术来解决这些缺点，比如说服务器端渲染技术(SSR)，通过这些技术可以完美解决这些缺点，解决完这些问题，实际上单页面应用对于前端来说是非常完美的页面开发解决方案。

以上就是如何理解vue中的SPA和MPA，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注编程网行业资讯频道。