什么是mvvm和spa
本內(nèi)容為系列內(nèi)容，請自行查看目錄
什么是mvvm
Model-View-ViewModel
很多初學(xué)者就對這個(gè)比較模糊，其實(shí)我這里講了你也不一定能理解，這個(gè)東西還是需要實(shí)踐才能體會(huì)
我盡量講的通俗一點(diǎn)
首先還是這張圖，大家可能都看過了，這里我們舉一個(gè)例子結(jié)合圖來說明
比如我們的電腦，顯示器等同于(view視圖層),硬盤等同于(model數(shù)據(jù)層),那么電腦顯示器怎么去展示硬盤里面的一個(gè)文本，還有我們在顯示器輸入的內(nèi)容它又怎么去存儲(chǔ)到硬盤的呢，這就得通過操作系統(tǒng)等同于(ViewModel視圖綁定)，他就完成了數(shù)據(jù)綁定和dom監(jiān)聽（收集操作和數(shù)據(jù)）
優(yōu)點(diǎn)
視圖 UI 和業(yè)務(wù)邏輯分離了，可以專注的去做各自的事情，這里可能大家就模糊了
我舉個(gè)例子，比如一個(gè)購物車，上面是商品列表，下面是總的商品數(shù)量和金額的計(jì)算，你點(diǎn)擊上面商品的增加數(shù)量或者刪除商品，下面的數(shù)據(jù)要跟著變化
如果你使用jquery這類傳統(tǒng)開發(fā)會(huì)怎么做 觸發(fā)點(diǎn)擊事件->獲取dom數(shù)據(jù)->處理數(shù)據(jù)->更新dom，那么這個(gè)就是一個(gè)取出數(shù)據(jù)又填充數(shù)據(jù)的過程
mvvm的開發(fā)怎樣做的呢，對應(yīng)的位置綁定點(diǎn)擊事件->觸發(fā)事件處理數(shù)據(jù)->自動(dòng)更新
在后面學(xué)習(xí)中大家就能夠理解了
什么是spa單頁面web應(yīng)用
單頁Web應(yīng)用（single page web application，SPA），就是只有一張Web頁面的應(yīng)用，是加載單個(gè)HTML 頁面并在用戶與應(yīng)用程序交互時(shí)動(dòng)態(tài)更新該頁面的Web應(yīng)用程序。
這樣講就太官方了其實(shí)不好理解，那我就用一點(diǎn)通俗的話來講
我們打開bilibili點(diǎn)擊導(dǎo)航欄的排行選項(xiàng)，我們發(fā)現(xiàn)瀏覽器進(jìn)行了跳轉(zhuǎn)到達(dá)了另外一個(gè)頁面實(shí)現(xiàn)了頁面切換，這樣的效果還包括比如404.html 每一個(gè)路徑對應(yīng)一個(gè)具體的頁面
然后我們來看嗶哩嗶哩的另外一個(gè)界面，在這個(gè)界面大家可以發(fā)現(xiàn)，無論我怎么點(diǎn)擊 頁面也切換了路徑也變化了，但是瀏覽器并沒有重新加載一個(gè)新的頁面
后者就是單頁面web應(yīng)用，好處大家是肉眼可見的，速度快，操作體驗(yàn)好
那么是怎樣實(shí)現(xiàn)的呢 以本節(jié)的vue舉例，剛剛上圖我們可以發(fā)現(xiàn)其實(shí)瀏覽器路徑是變化了的，這個(gè)就是路由切換（通過hash或者pushsate），可以理解為虛擬路徑，通過監(jiān)控虛擬路徑的變化，切換不同組件的顯示，就達(dá)到了切換頁面的效果
具體這個(gè)組件和路由會(huì)在后面講到
