前言
繼上篇推送之後，在掘金、segmentfault、簡書、部落格園等平臺上迅速收到了不俗的反饋，大部分網友都留言說感同身受，還有不少網友追問中篇何時更新。於是，閏土順應呼聲，在這個凜冽的寒冬早晨，將中篇熱文滾燙呈上。
搬好小板凳，接下來，正文從這開始～
在上篇的眾多留言中，有位網友的評論比較具有代表性，摘出來供大家一閱：
“ 同感啊樓主 比如做tab的時候，以前jq就是切換一下class，現在vue是切換資料，再根據資料顯示class，這彎繞的啊 ”
當然，有評論就有回覆，請看下面這位網友是怎麼回覆他的：
“ 哪裡繞彎了，只要記著資料驅動dom，習慣就好，這種模式才比較適合頁面dom變化渲染，只是之前被jq帶的根生蒂固 ”
有時候寫文章，不一定僅僅是為了分享自己的工作經驗，而是還想看看網友是怎麼看待這個話題的，從而衍生出一系列的對話，以及思想碰撞。
在這裡，閏土有句話想送給剛從JQ轉變思路過來的同行們：
MVVM時代，資料映像了DOM世界，一切以資料為核心，正如同數學可以描述世界一樣，你只需要考慮資料或者狀態即可。
所以，只要你充分理解了上面這句話，恭喜你，你已經從直接操作DOM的時代毫無壓力的過渡到了MVVM時代！
話不多說，先來看看MVVM專案的工程目錄：
當然你可以通過vue官網提供的vue-cli腳手架工具，來快速搭建專案結構。如果有不懂腳手架作用的老鐵，可以參照下圖，這就有點類似於工地上的腳手架，可以幫助工人們快速搭建該建築的結構模型（話糙理不糙，說明問題即可）。
專案結構搭建完畢後，就可以npm install 來安裝專案依賴了。通常這個階段，可能會比較漫長，建議用國內淘寶的映象cnpm。
也是在這期間，經常有同學在安裝某依賴模組時，會碰到命令列報錯，說是node或者npm版本過低等問題。假如你果真碰到這個類似的問題，可以考慮先將專案中的node_modules刪除掉，然後重新cnpm install安裝專案所需的依賴。通常這個情況，就會迎刃而解（不要問為什麼，這可能是個偏方）。
然後，你就可以大步流星地去執行以下操作了：
#開啟本地開發伺服器，監控專案檔案的變化，實時構建並自動重新整理瀏覽器，瀏覽器訪問 http://localhost:8081
npm run dev
#使用生產環境配置構建專案，構建好的檔案會輸出到 "dist" 目錄，
npm run build
#執行構建伺服器，可以檢視構建的頁面
npm run build-server
#執行單元測試
npm run unit
當你可以正常執行這個專案之後，接下來我們就該聊聊專案裡的各個檔案了。
俗話說，在js裡面一切皆物件，那麼vue裡面，則是一切皆元件，能用元件實現的，終將被元件實現。
說到元件，在專案中，你可能會看到公司前輩寫的元件程式碼，都是以 .vue 為字尾的檔案，開啟後你會發現它的整體結構分三層，分別定義了三個 tag標籤，template，script，style。然後對應的程式碼在自己的標籤裡面各司其職，所有需要的html、css、javascript都在裡面。
元件看完之後，我們移步到webpack的配置檔案，也就是webpack.config.js檔案，內容大概如下：
module.exports = {
entry: {
'index': './vue/index/main.js',
},
output: {
path: './public/bulid',
filename: '[filename].js' // 可以多點切入
},
module: {
loaders: [
{
test: /\.vue$/,
exclude: /node_modules/,
loader: vue.withLoaders({
js: 'babel?optional[]=runtime'
})
},
{ test: /\.scss$/, loader: 'style!css!sass },
{ test: /\.css$/, loader: "style!css" },
{ test: /\.js$/, loader: 'babel-loader' }
]
},
resolve: { // 解決 npm 的依賴問題
modulesDirectories: ['node_modules'],
extensions: ['', '.js', '.json']
},
}
複製程式碼我對 webpack 的最初信仰就是，它非常的智慧化，可以將一切的資源（包括html css javascript image）用 import 和 require 模組化引入，並對資源進行預處理，最終被打包成一個js檔案解釋執行。
接下來我想談談vue的生命週期和鉤子函式。
每個 Vue 例項在被建立之前都要經過一系列的初始化過程。例如需要設定資料監聽、編譯模板、掛載例項到 DOM、在資料變化時更新 DOM 等。
說的直白一點，分別對應的四組鉤子函式就是：
beforeCreate 、created； // 建立前、建立完成
beforeMount 、mounted；// 掛載前、掛載完成
beforeUpdate 、updated； // 更新前、更新完成
beforeDestory 、destoryed。// 銷燬前、銷燬完成
這裡閏土在網上找到一個很好的例子：
<!DOCTYPE html>
<html>
<head>
<title>Vue生命週期</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message : "閏土少年"
},
beforeCreate: function () {
console.group('beforeCreate 建立前狀態 >>>>>>>>>>');
console.log("%c%s", "color:red" , "el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //undefined
console.log("%c%s", "color:red","message: " + this.message)
},
created: function () {
console.group('created 建立完畢狀態 >>>>>>>>>>');
console.log("%c%s", "color:red","el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
beforeMount: function () {
console.group('beforeMount 掛載前狀態 >>>>>>>>>>');
console.log("%c%s", "color:red","el : " + (this.$el)); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
mounted: function () {
console.group('mounted 掛載結束狀態 >>>>>>>>>>');
console.log("%c%s", "color:red","el : " + this.$el); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
beforeUpdate: function () {
console.group('beforeUpdate 更新前狀態 >>>>>>>>>>');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
updated: function () {
console.group('updated 更新完成狀態 >>>>>>>>>>');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
beforeDestroy: function () {
console.group('beforeDestroy 銷燬前狀態 >>>>>>>>>>');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
destroyed: function () {
console.group('destroyed 銷燬完成狀態 >>>>>>>>>>');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message)
}
})
</script>
</body>
</html>
複製程式碼最後在chrome的console控制檯列印效果如下圖：
在上圖中大家可以看到，在beforeMount掛載前， $el裡面還是{{ message }}，這就是Virtual DOM（虛擬dom）技術的應用，上來二話不說，先把坑位佔了，等後面mounted掛載的時候，再把值渲染進去。
最後，我們再聊聊前後端分離，並行開發的事情。
前後端分離後，我們前端工程師開發前，需要和後端同學定義好介面資訊（請求地址，引數，返回資訊等），前端通過 mock 的方式，即可開始編碼，無需等待後端介面是否已經準備就緒（是不是感覺前端乾的活兒越來越重）。
在實戰演練過後，Vue給我的感覺就兩個字：省心。所有的操作關注點都在data上面。開發的時候，寫好data 剩下的事情就是 通過非同步請求來互動data，UI層繫結事件改變data，在元件間傳遞data。
後記
在這個MVVM橫行的時代，我已經漸漸的忘卻了jQuery的存在。本系列文章還沒有結束，下篇，也可能是終結篇，即將來襲！
宣告 歡迎轉載，請註明出處和作者，同時保留宣告。 作者：閏土少年 出處：http://www.cnblogs.com/runnin... 本部落格的文章如無特殊說明，均為原創，轉載請註明出處。如未經作者同意必須保留此段宣告，且在文章頁面明顯位置給出原文連線，否則保留追究法律責任的權利。
想了解我的更多動態？歡迎關注我的微信公眾號：閏土哥的前端路
