前端：Vue.js框架是什么，為什么選擇它?

“大白話，講編程”系列又回來(lái)了，這個(gè)系列我們一起學(xué)習(xí)的是Vue.js基礎(chǔ)知識(shí)。你沒(méi)看錯(cuò)，是基礎(chǔ)知識(shí)。所以，哪怕你入行不久，相信你在的大白話風(fēng)格下，也能學(xué)會(huì)。

但還是希望你有開(kāi)發(fā)過(guò)html，css，javascript的項(xiàng)目經(jīng)驗(yàn)，如果你連一點(diǎn)項(xiàng)目經(jīng)驗(yàn)都沒(méi)有，亦或者你早已掌握Vue.js的知識(shí)，那么這個(gè)系列不適合你當(dāng)前的學(xué)習(xí)階段。

1、學(xué)習(xí)目標(biāo)

通過(guò)這一節(jié)，你會(huì)學(xué)會(huì)：

（1）目前前端技術(shù)使用的趨勢(shì)

（2）什么是MVVM

（3）Vue.js的優(yōu)點(diǎn)

（4）Vue.js的兩大核心

（5）Vue.js的適用場(chǎng)景

2、誕生背景

近幾年來(lái)，得益于手機(jī)設(shè)備的普及和性能的提升，移動(dòng)端的web需求大量增加，產(chǎn)生了一種叫webapp的東西，也就是移動(dòng)端的網(wǎng)頁(yè)應(yīng)用。

它們功能越來(lái)越復(fù)雜，交互也越來(lái)越酷炫，功能與效果越來(lái)越接近于原生的APP。比如下面這些：

這種webapp它們不僅僅像h5營(yíng)銷(xiāo)網(wǎng)頁(yè)一樣有酷炫的效果，它們還有復(fù)雜的點(diǎn)擊、輸入、下拉選擇，視圖切換等復(fù)雜的交互。在這樣的業(yè)務(wù)需求下，我們還是沿用PC端的開(kāi)發(fā)方案，難免會(huì)不太合適。比如：視圖切換。

在PC端，視圖切換我們會(huì)用標(biāo)簽進(jìn)行頁(yè)面的跳轉(zhuǎn)，但如果在移動(dòng)端，那就歇菜了，你會(huì)遇到這樣的畫(huà)面：

(等到花兒都謝了)

這個(gè)時(shí)候用戶只能等.....3秒，5秒，8秒.......很難想象，在一個(gè)需要頻繁切換視圖的webapp里面，使用標(biāo)簽去實(shí)現(xiàn)，對(duì)用戶來(lái)說(shuō)是很不友好的，換你你也不愿意等那么久，反正我是不愿意了....

此外，接收用戶輸入的同時(shí)，很可能要及時(shí)更新視圖，比如用戶輸入不同的內(nèi)容，頁(yè)面就會(huì)相對(duì)應(yīng)進(jìn)行更新，點(diǎn)擊不同的選項(xiàng)，就會(huì)顯示不同的狀態(tài)等等交互效果。一旦這種交互多了，你要手動(dòng)地進(jìn)行操作，代碼就容易變得復(fù)雜和難以維護(hù)。

為了解決webapp這些的體驗(yàn)和開(kāi)發(fā)上的不足，我們決定學(xué)習(xí)并使用一個(gè)MVVM框架——Vue.js

3、什么是MVVM

MVVM可以拆分成：View --- ViewModel --- Model三部分 ，看下面的視圖：

那么，我們?cè)趺蠢斫釳VVM呢?

上圖中，左側(cè)的View相當(dāng)于我們的DOM內(nèi)容，我們所看到的頁(yè)面視圖，右側(cè)的Model相當(dāng)于我們的數(shù)據(jù)對(duì)象，比如一個(gè)對(duì)象的信息：

而中間的監(jiān)控者就負(fù)責(zé)監(jiān)控兩側(cè)的數(shù)據(jù)，并相對(duì)應(yīng)地通知另一側(cè)進(jìn)行修改。比如：你在Model層中修改了name的值為：“李四”，那么View視圖層顯示的“張三”也會(huì)自動(dòng)變成了“李四”，而這個(gè)過(guò)程就是有ViewModel來(lái)操作的，不需要你手動(dòng)地去寫(xiě)代碼去實(shí)現(xiàn)(你不用再手動(dòng)操作DOM了)。

如果你寫(xiě)過(guò)復(fù)雜的DOM操作，你就可以感受到它帶來(lái)的便利。

這就是MVVM框架，屬于MVVM的JS框架除了Vue.js，還有React.js，Angular.js。

這里我們不去分析具體這3個(gè)框架哪個(gè)更好，關(guān)于技術(shù)選型，每個(gè)開(kāi)發(fā)團(tuán)隊(duì)的情況都不一樣，考慮的因素也不一樣，只要合適自己就好。這里我們只說(shuō)一下Vue.js的優(yōu)點(diǎn)：

（1）Vue.js更輕量更快

（2）更容易上手，易學(xué)

4、Vue的核心

鋪墊了這么多，終于講到了Vue的核心。

那么，我們就來(lái)認(rèn)識(shí)一下Vue.js，這里摘取一段官網(wǎng)對(duì)它的介紹：

通過(guò)盡可能簡(jiǎn)單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件

這句話有兩個(gè)關(guān)鍵詞：數(shù)據(jù)綁定 和 視圖組件。

Vue的數(shù)據(jù)驅(qū)動(dòng)：數(shù)據(jù)改變驅(qū)動(dòng)了視圖的自動(dòng)更新，傳統(tǒng)的做法你得手動(dòng)改變DOM來(lái)改變視圖，vuejs只需要改變數(shù)據(jù)，就會(huì)自動(dòng)改變視圖，一個(gè)字：爽。再也不用你去操心DOM的更新了，這就是MVVM思想的實(shí)現(xiàn)。

視圖組件化：把整一個(gè)網(wǎng)頁(yè)的拆分成一個(gè)個(gè)區(qū)塊，每個(gè)區(qū)塊我們可以看作成一個(gè)組件。網(wǎng)頁(yè)由多個(gè)組件拼接或者嵌套組成?？聪聢D：

具體在開(kāi)發(fā)過(guò)程中怎樣實(shí)現(xiàn)一個(gè)組件，到底哪些區(qū)塊可以劃分成一個(gè)組件，后面的章節(jié)我們?cè)僖灰唤榻B，這里你只需要知道，在Vue.js中，網(wǎng)頁(yè)是可以看成多個(gè)組件組成的即可。

5、適用場(chǎng)景

如果你還在用jquery頻繁操作你的DOM來(lái)更新頁(yè)面的話，那么，你可以用Vue.js來(lái)解放你的DOM操作了。

如果你的項(xiàng)目中有多個(gè)部分是相同的，并可以封裝成一個(gè)組件，那么，你可以試試用Vue.js。

此外，Vue.js的核心實(shí)現(xiàn)中使用了ES5的Object.defineProperty特性，IE8及以下版本瀏覽器是不兼容的，所以，你的項(xiàng)目需要兼容這些較低版本的瀏覽器的話，那么，Vue.js就不適用了。

畢竟，開(kāi)發(fā)一個(gè)項(xiàng)目的目的不是為了使用某個(gè)框架。

6、本節(jié)小結(jié)

為了更好滿足當(dāng)前移動(dòng)webapp項(xiàng)目的開(kāi)發(fā)需求，MVVM框架誕生，而Vue.js便是這樣的一種js框架，其兩大核心：數(shù)據(jù)驅(qū)動(dòng)和組件化。

本文版權(quán)歸傳智播客前端與移動(dòng)開(kāi)發(fā)學(xué)院所有，歡迎轉(zhuǎn)載，轉(zhuǎn)載請(qǐng)注明作者出處。謝謝！

作者：傳智播客前端與移動(dòng)開(kāi)發(fā)培訓(xùn)學(xué)院

首發(fā)：http://www.xamj520.com/web/