近年來前端開發趨勢,MVVM框架,Vue.js的核心思想

近年來前端開發趨勢

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）頁面不過是組件的容器，組件能夠嵌套自由組合造成完整的頁面。