導語1——vue簡單介紹

Vue.js（國內的大牛尤雨溪 (Evan You) 開發的。）

一個輕量級MVVM框架(gzip只有20k+)，數據驅動+組件化前端開發。

對比Angular React：

1）Vue.js更輕量，gzip後只有20k+（Angular gzip後有60k+，對於移動端來講，vue更好）

2）Vue.js更易上手，學習曲線平穩（Angular最初是由java設計人員開發的，有些語法難懂）

3）借鑑Angular的指令（好比v-show，v-hidden）和React的組件化（把一個頁面抽成組件數，每一個組件都有完整的生命週期）（Vue.js也有不少本身的功能，好比計算屬性computed）

 

 

Vue產生背景

1.近年來前端開發趨勢變化：舊瀏覽器被淘汰，移動端需求增長。而 Vue.js 核心是利用ES5的Object.defined.profile。

舊瀏覽器：IE5~8，不支持ES5特性，利用Object.defined.profile

IE9移動端大部分基於webkit內核，支持ES5特性

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

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

傳統後臺MVC：前端數據和後臺進行交互時，刷新整個頁面，用戶體驗差

REST API+：利用Ajax與後端REST API進行通信，異步刷新前端某個區塊，優化提高體驗，同時把MVC拿到前端來作

 

PS：MV*：包括MVC，MVP，MVWM

 

 

MVVM框架

1.包括：View（視圖，對應前端的DOM），ViewModel（鏈接視圖和數據，通信，觀察者），Model（數據，對應前端的JavaScript對象）

MVVM框架下View和Model之間沒辦法通信，必須經過ViewModel觀察二者變化，並將其變化反映到另外一方那裏，從而實現雙向綁定。

2.功能：

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

2）提供基礎的架構抽象

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

3.好處

當前端進行數據操做時，不須要改動整個頁面，只須要改動DOM須要改的那一部分，不須要刷新整個頁面，只刷新須要改動的那一部分。這對移動端來講是很必要的，雖然有不少數據被緩存，但刷新整個頁面，DOM，js，css會被從新解析，這會浪費資源。所以，移動端常常作成xpa單頁應用。在這個基礎上就誕生出許多MVVM框架，像Angular.js，react.js，Vue.js。

 

 

Vue.js核心思想

1.數據驅動：DOM是數據的一種天然映射

 

數據響應原理：數據（model）改變驅動視圖（view）自動更新

解析：假設這裏有一個數據 a.b，在實例化過程當中會經過 ES5 的 object.defineproperty() 添加 getter和setter方法，同時 vue.js 會對模板進行編譯，解析生成一個指令對象，這裏的指令對象就是 v-text ，每一個指令都會關聯一個 watcher ，當對指令對應的表達式a.b求值時，就會觸發 getter 方法，此時依賴會升級到對watcher中，若是再改變 a.b 的值，就會觸發 setter 方法，會通知到關聯的 watcher 。watcher 從新求值，比較新舊值，若是值改變，watcher 會通知對應指令，指令調用 update 方法，指令是對DOM的封裝，因此會調用DOM原生方法去更新視圖。

 

2.組件化：擴展HTML元素，封裝可重用的代碼

組件設計原則：

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

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

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