摘要：于是，閏土順應(yīng)呼聲，在這個凜冽的寒冬早晨，將中篇熱文滾燙呈上。本系列文章還沒有結(jié)束，下篇，也可能是終結(jié)篇，即將來襲作者閏土少年鏈接來源掘金著作權(quán)歸作者所有。

繼上篇推送之后，在掘金、segmentfault、簡書、博客園等平臺上迅速收到了不俗的反饋，大部分網(wǎng)友都留言說感同身受，還有不少網(wǎng)友追問中篇何時更新。于是，閏土順應(yīng)呼聲，在這個凜冽的寒冬早晨，將中篇熱文滾燙呈上。

搬好小板凳，接下來，正文從這開始～

在上篇的眾多留言中，有位網(wǎng)友的評論比較具有代表性，摘出來供大家一閱：

“ 同感啊樓主 比如做tab的時候，以前jq就是切換一下class，現(xiàn)在vue是切換數(shù)據(jù)，再根據(jù)數(shù)據(jù)顯示class，這彎繞的啊 ”

當(dāng)然，有評論就有回復(fù)，請看下面這位網(wǎng)友是怎么回復(fù)他的：

“ 哪里繞彎了，只要記著數(shù)據(jù)驅(qū)動dom，習(xí)慣就好，這種模式才比較適合頁面dom變化渲染，只是之前被jq帶的根生蒂固 ”

有時候?qū)懳恼?，不一定僅僅是為了分享自己的工作經(jīng)驗(yàn)，而是還想看看網(wǎng)友是怎么看待這個話題的，從而衍生出一系列的對話，以及思想碰撞。
在這里，閏土有句話想送給剛從JQ轉(zhuǎn)變思路過來的同行們：

MVVM時代，數(shù)據(jù)映像了DOM世界，一切以數(shù)據(jù)為核心，正如同數(shù)學(xué)可以描述世界一樣，你只需要考慮數(shù)據(jù)或者狀態(tài)即可。

所以，只要你充分理解了上面這句話，恭喜你，你已經(jīng)從直接操作DOM的時代毫無壓力的過渡到了MVVM時代！

話不多說，先來看看MVVM項目的工程目錄：

當(dāng)然你可以通過vue官網(wǎng)提供的vue-cli腳手架工具，來快速搭建項目結(jié)構(gòu)。如果有不懂腳手架作用的老鐵，可以參照下圖，這就有點(diǎn)類似于工地上的腳手架，可以幫助工人們快速搭建該建筑的結(jié)構(gòu)模型（話糙理不糙，說明問題即可）。

項目結(jié)構(gòu)搭建完畢后，就可以npm install 來安裝項目依賴了。通常這個階段，可能會比較漫長，建議用國內(nèi)淘寶的鏡像cnpm。

也是在這期間，經(jīng)常有同學(xué)在安裝某依賴模塊時，會碰到命令行報錯，說是node或者npm版本過低等問題。假如你果真碰到這個類似的問題，可以考慮先將項目中的node_modules刪除掉，然后重新cnpm install安裝項目所需的依賴。通常這個情況，就會迎刃而解（不要問為什么，這可能是個偏方）。

然后，你就可以大步流星地去執(zhí)行以下操作了：

npm run dev

npm run build

npm run build-server

npm run unit

當(dāng)你可以正常運(yùn)行這個項目之后，接下來我們就該聊聊項目里的各個文件了。

俗話說，在js里面一切皆對象，那么vue里面，則是一切皆組件，能用組件實(shí)現(xiàn)的，終將被組件實(shí)現(xiàn)。

說到組件，在項目中，你可能會看到公司前輩寫的組件代碼，都是以 .vue 為后綴的文件，打開后你會發(fā)現(xiàn)它的整體結(jié)構(gòu)分三層，分別定義了三個 tag標(biāo)簽，template，script，style。然后對應(yīng)的代碼在自己的標(biāo)簽里面各司其職，所有需要的html、css、javascript都在里面。

組件看完之后，我們移步到webpack的配置文件，也就是webpack.config.js文件，內(nèi)容大概如下：

module.exports = {
    entry: {
        "index": "./vue/index/main.js",
    },
    output: {
        path: "./public/bulid",
        filename: "[filename].js" // 可以多點(diǎn)切入
    },
    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 模塊化引入，并對資源進(jìn)行預(yù)處理，最終被打包成一個js文件解釋執(zhí)行。

接下來我想談?wù)剉ue的生命周期和鉤子函數(shù)。

每個 Vue 實(shí)例在被創(chuàng)建之前都要經(jīng)過一系列的初始化過程。例如需要設(shè)置數(shù)據(jù)監(jiān)聽、編譯模板、掛載實(shí)例到 DOM、在數(shù)據(jù)變化時更新 DOM 等。
說的直白一點(diǎn)，分別對應(yīng)的四組鉤子函數(shù)就是：

beforeCreate 、created； // 創(chuàng)建前、創(chuàng)建完成
beforeMount 、mounted；// 掛載前、掛載完成
beforeUpdate 、updated； // 更新前、更新完成
beforeDestory 、destoryed。// 銷毀前、銷毀完成

這里閏土在網(wǎng)上找到一個很好的例子：

    
    




     
{{ message }}

最后在chrome的console控制臺打印效果如下圖：

在上圖中大家可以看到，在beforeMount掛載前， $el里面還是{{ message }}，這就是Virtual DOM（虛擬dom）技術(shù)的應(yīng)用，上來二話不說，先把坑位占了，等后面mounted掛載的時候，再把值渲染進(jìn)去。

最后，我們再聊聊前后端分離，并行開發(fā)的事情。

前后端分離后，我們前端工程師開發(fā)前，需要和后端同學(xué)定義好接口信息（請求地址，參數(shù)，返回信息等），前端通過 mock 的方式，即可開始編碼，無需等待后端接口是否已經(jīng)準(zhǔn)備就緒（是不是感覺前端干的活兒越來越重）。

在實(shí)戰(zhàn)演練過后，Vue給我的感覺就兩個字：省心。所有的操作關(guān)注點(diǎn)都在data上面。開發(fā)的時候，寫好data 剩下的事情就是 通過異步請求來交互data，UI層綁定事件改變data，在組件間傳遞data。

在這個MVVM橫行的時代，我已經(jīng)漸漸的忘卻了jQuery的存在。本系列文章還沒有結(jié)束，下篇，也可能是終結(jié)篇，即將來襲！

作者：閏土少年
鏈接：https://juejin.im/post/5a1f60...
來源：掘金
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。

想了解我的更多動態(tài)？歡迎關(guān)注我的微信公眾號：閏土大叔