mvvm簡介

mvvm是 Model(模型) View（視圖） ViewModel（視圖模型） 的簡稱。這就是頁面渲染和數(shù)據(jù)交互的全部內(nèi)容。下面看圖說話：

1、View也就是視圖，也就是dom ；
2、Model也就是模型，簡單理解成JavaScript相關(guān)數(shù)據(jù)；
3、ViewModel也就是視圖模型，也就可以理解成溝通view已經(jīng)model的橋梁（這不是廢話么）；

何謂橋梁？
1.當用戶進行dom操作時view就會告訴vm，然后vm會根據(jù)自定義的相關(guān)操作然后告訴model說下那個變量x給這么動一下。
2.當model發(fā)生改變時model就會告訴vm這個數(shù)據(jù)變了，然后vm根據(jù)自定義相關(guān)操作通知view這個dom節(jié)點需要改變。
3.vm充當?shù)氖且粋€觀察者的角色，時刻關(guān)注著view/model的變化。

為什么要用mvvm

1、簡化復雜邏輯數(shù)據(jù)交互

舉個栗子：在使用原生js或者jq中數(shù)據(jù)發(fā)生變化，首先需要通過選擇器找到相關(guān)dom節(jié)點，然后進行操作例如element的顯隱、dom增減、類的添加等等，在mvvm中，只需要采用適當?shù)闹噶?，綁定相關(guān)變量即可操作，免去諸多邏輯上的煩惱。

2、實現(xiàn)單頁頁面

為毛要單頁呢？以往項目中請求新的頁面都要通過頁面刷新，都需要全部請求新的資源。雖然資源可以通過緩存機制進行優(yōu)化，但是新頁面的加載js,css,html文件全都要被瀏覽器重新解析，造成資源的浪費，尤其是對移動端十分不友好。通過單頁應(yīng)用的異步請求局部刷新這一特性，解決了這一個問題。（同樣要說的是，spa單頁對seo的打擊也是毀滅性的。）

ps:參考視頻：慕課網(wǎng)餓了么實戰(zhàn)；