本篇文章給大家分享的是有關(guān)如何理解vue中的SPA和MPA，小編覺(jué)得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話(huà)不多說(shuō)，跟著小編一起來(lái)看看吧。

創(chuàng)新互聯(lián)公司專(zhuān)注于企業(yè)營(yíng)銷(xiāo)型網(wǎng)站、網(wǎng)站重做改版、崆峒網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5頁(yè)面制作、成都做商城網(wǎng)站、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)公司、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性?xún)r(jià)比高，為崆峒等各大城市提供網(wǎng)站開(kāi)發(fā)制作服務(wù)。

什么是SPA

SPA 全稱(chēng) Single Page Application，即單頁(yè)面應(yīng)用。一般也稱(chēng)為 CSR（Client Side Render），即客戶(hù)端渲染。它所需的資源，如 HTML、CSS 和 JS 等，在一次請(qǐng)求中就加載完成，也就是不需刷新地動(dòng)態(tài)加載。瀏覽器(Client)渲染顧名思義就是所有的頁(yè)面渲染、邏輯處理、頁(yè)面路由、接口請(qǐng)求均是在瀏覽器中發(fā)生。對(duì)于 SPA 來(lái)說(shuō)，頁(yè)面的切換就是組件或視圖之間的切換。

簡(jiǎn)單來(lái)說(shuō),SPA應(yīng)用程序只有一個(gè)html文件,在vue中可以通過(guò)vue-router來(lái)局部切換組件,而非刷新整個(gè)頁(yè)面,來(lái)實(shí)現(xiàn)無(wú)刷新切換頁(yè)面的技術(shù)

SPA應(yīng)用程序避免了由于在服務(wù)器上呈現(xiàn)頁(yè)面而導(dǎo)致的中斷。 這消除了 Web 開(kāi)發(fā)世界在提供無(wú)縫用戶(hù)體驗(yàn)方面通常面臨的最大問(wèn)題。

SPA的原理

js會(huì)感知到url的變化，通過(guò)這一點(diǎn)可以用js監(jiān)聽(tīng)url中hash值的變化,通過(guò)onhashchange事件,由于哈希值的變換并不會(huì)引發(fā)頁(yè)面的刷新和跳轉(zhuǎn),當(dāng)監(jiān)聽(tīng)到hash變化,就可以動(dòng)態(tài)的切換組件,就可以實(shí)現(xiàn)無(wú)刷新切換頁(yè)面技術(shù)

• 注意. 在vue-router中 vue不支持onhashchange事件,它希望你使用vue-router中的鉤子函數(shù)解決

SPA的優(yōu)點(diǎn)

• 1.頁(yè)面切換快

頁(yè)面每次切換跳轉(zhuǎn)時(shí)，并不需要做html文件的請(qǐng)求，這樣就節(jié)約了很多http發(fā)送時(shí)延，我們?cè)谇袚Q頁(yè)面的時(shí)候速度很快。

• 2.用戶(hù)體驗(yàn)好

頁(yè)面片段間的切換快，包括移動(dòng)設(shè)備, 尤其是在網(wǎng)絡(luò)環(huán)境差的時(shí)候, 因?yàn)榻M件已經(jīng)預(yù)先加載好了, 并不需要發(fā)送網(wǎng)絡(luò)請(qǐng)求, 所以用戶(hù)體驗(yàn)好

SPA的缺點(diǎn)

• 1.首屏加載速度慢

首屏?xí)r需要請(qǐng)求一次html，同時(shí)還要發(fā)送一次js請(qǐng)求，兩次請(qǐng)求回來(lái)了，首屏才會(huì)展示出來(lái)。相對(duì)于多頁(yè)應(yīng)用，首屏?xí)r間慢。

• 2.不易于SEO

SEO效果差，因?yàn)樗阉饕嬷徽J(rèn)識(shí)html里的內(nèi)容，不認(rèn)識(shí)js的內(nèi)容，而單頁(yè)應(yīng)用的內(nèi)容都是靠js渲染生成出來(lái)的，搜索引擎不識(shí)別這部分內(nèi)容，也就不會(huì)給一個(gè)好的排名，會(huì)導(dǎo)致SPA應(yīng)用做出來(lái)的網(wǎng)頁(yè)在百度和谷歌上的排名差。

什么是MPA

MPA多頁(yè)面應(yīng)用 MultiPage Application ，指有多個(gè)獨(dú)立頁(yè)面的應(yīng)用（多個(gè)html頁(yè)面），每個(gè)頁(yè)面必須重復(fù)加載js、css等相關(guān)資源。多頁(yè)應(yīng)用跳轉(zhuǎn)，需要整頁(yè)資源刷新。

與 SPA 對(duì)比最大的不同即是頁(yè)面路由切換由原生瀏覽器文檔跳轉(zhuǎn)（navigating across documents）控制。 頁(yè)面跳轉(zhuǎn)，是返回 HTML 的。

MPA的優(yōu)點(diǎn)

• 1.首屏加載速度快

當(dāng)我們?cè)L問(wèn)頁(yè)面的時(shí)候，服務(wù)器返回一個(gè)html，頁(yè)面就會(huì)展示出來(lái)，這個(gè)過(guò)程只經(jīng)歷了一個(gè)HTTP請(qǐng)求，所以頁(yè)面展示的速度非?？?。

• 2.SEO效果好

搜索引擎在做網(wǎng)頁(yè)排名的時(shí)候，要根據(jù)網(wǎng)頁(yè)的內(nèi)容才能給網(wǎng)頁(yè)權(quán)重，來(lái)進(jìn)行網(wǎng)頁(yè)的排名。搜索引擎是可以識(shí)別html內(nèi)容的，而我們每個(gè)頁(yè)面所有的內(nèi)容都放在html中，所以這種多頁(yè)應(yīng)用SEO排名效果好。

MPA的缺點(diǎn)

• 1.頁(yè)面切換慢

因?yàn)槊看翁D(zhuǎn)都需要發(fā)送一個(gè) HTTP 請(qǐng)求，如果網(wǎng)絡(luò)狀態(tài)不好，在頁(yè)面之間來(lái)回跳轉(zhuǎn)時(shí)，就會(huì)發(fā)生明顯的卡頓，影響用戶(hù)體驗(yàn)。

• 2.用戶(hù)體驗(yàn)不佳

如果網(wǎng)絡(luò)慢,頁(yè)面很容易半天加載不出來(lái),用戶(hù)體驗(yàn)非常不好

為什么要使用SPA應(yīng)用開(kāi)發(fā)

通過(guò)上面的分析,我們不難發(fā)現(xiàn),SPA和MPA各有優(yōu)缺點(diǎn),那我們?yōu)槭裁催€要開(kāi)發(fā)SPA呢,其實(shí),Vue還提供了一些其它的技術(shù)來(lái)解決這些缺點(diǎn)，比如說(shuō)服務(wù)器端渲染技術(shù)(SSR)，通過(guò)這些技術(shù)可以完美解決這些缺點(diǎn)，解決完這些問(wèn)題，實(shí)際上單頁(yè)面應(yīng)用對(duì)于前端來(lái)說(shuō)是非常完美的頁(yè)面開(kāi)發(fā)解決方案。

以上就是如何理解vue中的SPA和MPA，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見(jiàn)到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。