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

繼上篇推送之后，在掘金、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安裝項目所需的依賴。通常這個情況，就會迎刃而解（不要問為什么，這可能是個偏方）。

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

npm run dev

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。// 銷毀前、銷毀完成

這里閏土在網上找到一個很好的例子：

    
    




     
{{ message }}

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

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

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

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

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

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

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

想了解我的更多動態？歡迎關注我的微信公眾號：閏土大叔