mvvm

  在MVC裏，View是能夠直接訪問Model的！從而，View裏會包含Model信息，不可避免的還要包括一些業務邏輯。 MVC模型關注的是Model的不變，因此，在MVC模型裏，Model不依賴於View，可是 View是依賴於Model的。不只如此，由於有一些業務邏輯在View裏實現了，致使要更改View也是比較困難的，至少那些業務邏輯是沒法重用的。

　MVVM在概念上是真正將頁面與數據邏輯分離的模式，它把數據綁定工做放到一個JS裏去實現，而這個JS文件的主要功能是完成數據的綁定，即把model綁定到UI的元素上。

　有人作過測試：使用Angular（MVVM）代替Backbone（MVC）來開發，代碼能夠減小一半。

  此外，MVVM另外一個重要特性，雙向綁定。它更方便你同時維護頁面上都依賴於某個字段的N個區域，而不用手動更新它們。

1.舊瀏覽器逐漸淘汰，移動端需求增長

  2.前端交互愈來愈多，功能愈來愈複雜

  現現在，前端可謂是一應俱全，產品形態五花八門，涉獵極廣。高大上的技術庫和框架，酷炫的運營活動頁面和好玩的H5小遊戲，不過這些一兩個文件的小項目並不是是前端技術的主要應用場景，更具商業價值的是複雜的web應用，它們功能完善，頁面繁多，爲用戶提供了完整的產品體驗，例如新聞趣味站，在線購物平臺， 社交網絡，金融信貸應用，音樂互動社區，視頻分享平臺，打車出行平臺等等，這些網站和平臺的共同特色就是交互多，功能複雜。

 3.架構從傳統的後臺MVC向REST API+前端MV*遷移

 傳統的後臺MVC方式，是當前端與後端發生一些數據交互的時候，會刷新整個頁面，這樣的用戶體驗是很是差的，所以，咱們經過ajax的方式，和後端REST API作通訊，異步刷新頁面的某個區塊，來優化和提高體驗，同時把MV*拿到前端來作。

MVVM框架

MVVM框架主要包括三個部分Model、View和ViewModel，Model指的是數據部分，對應到前端就是一些Javascript對象，View指的視圖部分，對應到前端就是DOM，ViewModel就是鏈接數據和視圖的中間件，在MVVM的框架下視圖和數據是不能直接通訊的，它們經過ViewModel來通訊，ViewModel一般要實現一個observer觀察者，當數據發生變化，ViewModel可以監聽到數據的這種變化，而後通知到對應的視圖作自動更新，而當用戶操做視圖，ViewModel也能監聽到視圖的變化，而後通知數據作改動，這實際上就實現了數據的雙向綁定。以上即是MVVM的一些基本概念。

MVVM框架的主要應用場景

1）針對具備複雜交互邏輯的前端應用

  2）提供基礎的架構抽象

  3）經過Ajax數據持久化，保證前端用戶體驗

  好處就是當先後端進行一些數據交互的時候，前端能夠經過Ajax請求對後端作數據持久化，不須要刷新整個頁面，只須要改動DOM裏須要改動的那部分數據和內容，特別是對於移動端應用場景，刷新頁面的代價太昂貴，會從新加載不少資源，雖然有些資源會被緩存，可是頁面的DOM、JS、CSS都會被瀏覽器從新解析一遍，所以，移動端頁面常常會作成SPA單頁應用，在這個基礎上就誕生了不少MVVM框架，如Angular、React、Vue

Vue.js的核心思想

Vue.js的核心思想包括兩個方面：數據驅動和組件化

  數據驅動：DOM是數據的一種天然映射，在vue.js中只須要操做數據，vue.js經過directives指令去對DOM作一層封裝，當數據發生變化，會通知指令去修改對應的DOM，數據驅動DOM變化，DOM是數據的一種天然映射，vue.js還會對操做作一些監聽，當咱們修改視圖的時候，vue.js監聽到這些變化，從而去改變數據，這樣就實現了數據的雙向綁定。

  組件化的目的是擴展HTML元素，封裝可重用的代碼

  組件設計原則：

  1）頁面上每一個獨立的可視/可交互區域視爲一個組件，

  2）每一個組件對應一個工程目錄，組件所須要的各類資源在這個目錄下就近維護，

  3）頁面不過是組件的容器，組件能夠嵌套自由組合造成完整的頁面。