前言
在我寫終結篇的日子裡，Vue版本穩定在2.5.10。當我摸清Vue的脈絡之後，以一個爬坑無數的親歷者的身份，談談我在MVVM時代裡遇到的那些事兒。
接下來，正文從這開始~
好多童鞋學習Vue都有燈下黑的誤區，比如，觀看各種Vue入門的視訊教程，翻閱各種Vue學習筆記的技術部落格，閒逛各種號稱Vue技術交流的大群。。。殊不知你們都在騎驢找馬繞遠路。其實通向MVVM時代最筆直的一條大路，就是看官方文件，簡單粗暴有療效。如果看一遍還不明白，那就多看幾遍。書讀百遍其義自見，就是這個理兒。你跟著官方文件走一遍，然後用vue-cli腳手架搭一個環境，找個iview之類的UI元件庫直接開擼，多練手自然而然就會了。
如果你在公司專案中遇到難以逾越的Question，請直接請你們公司的前端大佬吃頓火鍋，三杯酒下肚，面對如此“美人嬌，人如遙。面色微醺自嬌俏”的大佬，然後順勢請教下工作上的事情，那麼你的Question還是Question嗎？噗嗤~
接下來我要分幾個小節來梳理一下我的vue進階之路：
關於Vue Devtools
老話說的好，“工欲善其事，必先利其器”。當我們在開發一個Vue專案時，強烈推薦在你的Chrome上安裝Vue Devtools，這是一個除錯審查Vue應用的上古神器。別問我怎麼FQ安裝這個外掛，我也是借了Lantern藍燈的梯子，在Chrome網上商店裡搜尋對應的擴充套件程式即可。如果你是伸手黨，歡迎加入我的前端圈子，那裡有你想要的installer。
從上圖我們可以看到元件的prop屬性、計算屬性、vue getter屬性等，以及Vuex中的觸發的mutation、state 當前的值等我們可能關注的內容都直觀地展示了出來。
為什麼在 HTML 中監聽事件
你可能注意到這種事件監聽的方式違背了關注點分離這個長期以來的優良傳統。但不必擔心，因為所有的 Vue.js 事件處理方法和表示式都嚴格繫結在當前檢視的 ViewModel 上，它不會導致任何維護上的困難。實際上，使用 v-on 有幾個好處：
掃一眼 HTML 模板便能輕鬆定位在 JavaScript 程式碼裡對應的方法。
因為你無須在 JavaScript 裡手動繫結事件，你的 ViewModel 程式碼可以是非常純粹的邏輯，和 DOM 完全解耦，更易於測試。
當一個 ViewModel 被銷燬時，所有的事件處理器都會自動被刪除。你無須擔心如何自己清理它們。
怎麼理解元件插槽 slot
對於一個靈活的元件來說，可替換的元件非常重要。Vue中提供了一個叫slot的概念，使用slot標籤作為內容插槽的佔位符。
俗話說，Talk is cheap show your code。趕緊貼上我的程式碼~
定義程式碼：
1 <template>
2
3 <div class="modal">
4
5 <div class="modal-header">
6
7 <slot name="header"></slot>
8
9 </div>
10
11 <div class="modal-content">
12
13 <slot name="content"></slot>
14
15 </div>
16
17 <div class="modal-footer">
18
19 <slot name="footer"></slot>
20
21 </div>
22
23 </div>
24
25 </template>
使用程式碼：
1 <modal>
2
3 <template slot="header"><!-- 宣告替換 template 中的 header 槽 -->
4
5 <h2>This is header</h2>
6
7 </template>
8
9 <div slot="body"><!-- template 標籤不是必須的，可以指定槽元素 -->
10
11 <p>Content body.</p>
12
13 </div>
14
15 <template slot="footer">
16
17 <div>Footer</div>
18
19 </template>
20
21 </modal>
拋棄vue-resource擁抱axios
前端開發不可避免的就是前後端互動。在Vue2.0出來之後，尤教主登臺振臂高呼，宣告停止了對vue-resource的更新，推薦大家擁抱新出來的axios。說是api更迭，其實兩者都是對ES6的promise物件的實現。說白了，就是變相地拋棄了vue-resource，更恰當的說法是，物競天擇，輕量小巧。為了響應教主的號召，我果斷入了axios的坑。
問把大象裝冰箱，總共分幾步？
第一步，安裝：
npm install axios –save-dev
第二步，引入：
1 import Vue from `vue`
2
3 import axios from `axios`
4
5 // 引入axios之後，修改原型鏈，解決axios不能use的問題
6
7 Vue.prototype.$axios = axios;
第三步，使用：
俗話說，不會互動的前端不是好全棧。我還是直接上程式碼吧~
<template>
<div>{{myData}}</div>
</template>
<script>
export default {
data() {
return {
myData: {}
}
},
created() {
this.$axios.get(url).then((response) => {
// success
this.myData = response.data.data;
}, (error) => {
// error
console.log(error)
});
}
}
</script>
說axios撩妹（請求資料）技術一流應該沒人反對吧，你看我既可以get()請求，又可以post()請求，還可以用類ajax的形式傳送請求，當請求成功後，會執行.then,否則執行.catch。
緊接著是webpack編譯，跑個示例，F12開啟Devtools裡的Network，然後勾選XHR，發現請求狀態碼Status Code:200 OK （興奮狀），然後順勢點開Response看到響應到的json資料。OK，握手結束。
當然，如果你在公司裡看到有個人對著電腦螢幕上的Network傻樂的時候，你應該能猜到，他剛剛完成了一次完美的請求，從他猥瑣的笑容中，你能隱隱察覺到，此人正YY在進階全棧的路上不可自拔，哈哈~。
尊敬的尤教主，你總是套路得人心吶~
Vue元件化實踐帶來的思考
這兩年前端圈子裡盛行元件化，給開發者帶來的好處顯而易見，使用者介面完全可以用巢狀的元件樹來描述，提高了程式碼的複用性，再也不用拷貝重複DOM結構，前端原來可以如此美好。
在Vue裡面，每個封裝好的元件可以看成一個個的ViewModel。如果在簡單的 SPA 專案中，可以直接用 Vue.component 去定義一個全域性元件。而現在公司級的專案，大多數都會引入工程化的管理，用包管理工具去管理，npm 或者 yarn。所以 Vue 在複雜的專案中用 Vue.component 去定義一個元件的方式就不適合了。這裡就需要用到單檔案元件，還可以使用 Webpack 或 Browserify 等構建工具。
元件的劃分一般分為兩部分：
頁面區域：
header、footer、sidebar……
功能模組：
select、pagination……
vue 雖然為元件style實現了scoped，但這也存在侷限， 如果 A 元件包含了 B 元件，A 的 scoped css 就不應該試圖定義 B 元件內部的元素樣式，這是很糟糕的體驗。如此，解決 css 命名汙染，CSS Modules看起來倒是一個挺不錯的解決方案。
之前專案中引用lodash，十分便於處理資料，而在這次新元件開發中並沒引入，因此開發過程中遇到資料處理時總想到lodash方法。其實js原生已支援很多諸如forEach、map便捷的方法，及使用for in 遍歷物件，lodash只是封裝的語法糖，對於lodash中較常用好用的方法如_.find()等也用原生實現了個util。因此推薦使用原生操作，儘量避免三方庫的引用，也能最大化加深基礎知識。
還有一點我想分享的是，動態模版新增方法。先來看看需求：
服務端返回
<p><img src=".." /></p>html串，需要實現頁面點選圖片時彈出預覽框。
我最初的想法是通過對html串拼接click方法，即可通過點選事件呼叫彈窗元件並獲取其src預覽。結果做不到對拼接的html再編譯以使點選事件生效。
來看看我最後解決的思路：通過事件代理實現。對動態模版的父元素繫結方法@click=”imageProxy($event)”
1 imageProxyy(evt){
2
3 if (evt.target.nodeName === `IMG`) {
4
5 evt.stopPropagation();
6
7 this.showPicView = true;
8
9 //evt.target.currentSrc 後續處理
10
11 }
12
13 }
後記
馬上到年終了，好多人的小心臟又開始不安分了，類似加薪、跳槽、晉升等各種躁動的小因子，似蠕蟲一般刺撓著你的腦漿。
借用吐槽大佬的話，如果你是工作經驗小於2年的朋友，我希望能夠說幾句。
1、儘量呆在各個領域的Top公司，公司業務成長會帶著你一起成長起飛，你能享受到這個溢價；
2、如果你已經在Top公司儘量不要太早出來，至少三年以上，要抵制住誘惑；
3、儘量在細分領域或專職崗位做到一定的深度和知名度。
最後，還是那句話，前三年靠技術吃飯，往後靠綜合能力吃飯。
此係列文章，The End（終）。
宣告
歡迎轉載，請註明出處和作者，同時保留宣告。
作者：閏土少年
出處：http://www.cnblogs.com/runnin…
本部落格的文章如無特殊說明，均為原創，轉載請註明出處。如未經作者同意必須保留此段宣告，且在文章頁面明顯位置給出原文連線，否則保留追究法律責任的權利。
想了解我的更多動態？歡迎關注我的微信公眾號：閏土大叔
