最近倆月正好用 vue 做了一個大數據的項目，積累了很多心得。今天終於有機會分享出來了。
組件（component）的使用
vue 提供的模塊化無疑是提高開發效率的神器，而且對於後期代碼優化和維護也提供的極大地便利。
組件使用簡介
vue 提供了組件功能，組件又可以分為全局組件和非全局組件。區別是全局組件你可以直接在 .vue 文件中直接使用自定義的 html 即可。非全局組件必須在 Vue 的對象中定義 components 引入這個組件
- 局部組件引用方式
import A from '@/component/A'
export default {
data () {},
components: { A }
}
複製代碼
- 全局組件引用方式
// index.js 文件
import A from '@/component/A'
A.install = function (Vue) {
Vue.component(A.name, A)
}
export {
A
}
// main.js 文件
import { A } from './components/index'
Vue.use(A)
複製代碼
這裡針對引入全局組件有一個優化小技巧，上面的方式引入全局組件需要同時維護 index.js 文件和 main.js 文件很麻煩。採用下面的代碼可以只維護 index.js 文件即可
// index.js 文件
import A from '@/component/A'
A.install = function (Vue) {
Vue.component(A.name, A)
}
function InstallAll(Vue) {
Vue.use(A)
}
export {
A,
InstallAll
}
// main.js 文件
import { InstallAll } from './components/index'
InstallAll(Vue)
複製代碼
驗證碼組件的複用
手機號 + 驗證碼進行登錄已經是目前主流的登錄方式之一了。但是一個項目要使用驗證碼的地方非常多，像登錄、註冊、修改密碼、信息再次確認的時候都會進行二維碼請求。每個地方重寫驗證碼邏輯很麻煩，所以驗證碼是需要抽象出來的組件的。
驗證碼通常會對接多個接口，或者是一個接口但是需要傳遞獲取驗證碼的類型。而這些接口通常都需要一個手機號。因此驗證碼需要接收倆個參數：phone, type。自身完成單擊操作和讀秒操作即可，不需要對引用的地方產生任何影響。
// 最後每個頁面調用的時候大概漲這個樣子 複製代碼
收藏組件的複用
收藏功能使用的頻率要比驗證碼更高，當然也更難。
像我最近做的大數據項目，用戶可以對視頻、音樂、話題進行收藏。同時他們出現的地方也非常多，像視頻列表、音樂列表、話題列表、視頻詳情、音樂詳情、話題詳情... ... 都會有收藏的功能，不抽象成一個組件同樣的邏輯寫好幾個地方後期維護是及其困難的。
像這種收藏，通常都會需要一個 id，是否收藏狀態，以及完成收藏後的一系列的跳轉功能。因此需要倆個參數: id 和 status。和 complete 回調方法
// 最後每個頁面調用的時候大概漲這個樣子 複製代碼
我上面提到我會收藏音樂、視頻、話題，很顯然是三個收藏接口。難道要寫三個收藏組件麼？當然不是，既然同屬於收藏功能，自然是一個組件搞定了。再加一個 type 參數區別一下即可了
// 最後每個頁面調用的時候大概漲這個樣子 複製代碼
這樣每次用到收藏的時候我只需要複製這一行代碼就可以了
總結
第三方 UI 庫會給我們引入非常多好用的組件，像輪播圖、表單、圖片上傳。但是這些都是跟業務無關的組件，而我們在做項目的時候時候肯定會碰到大量重複的功能。為了代碼的易維護性一定要有良好的組件抽象能力。合理運用好 component 功能。
上面提到的驗證碼和收藏功能使用次數頻繁，我通常都會當做全局組件處理（個人會把使用次數 > 1 的組件當成全劇組件），但是有的頁面及其複雜，一個頁面上萬行代碼後期查找肯定費事巴拉的。也一定要對其進行拆分處理不要一個組件寫到尾。針對這種情況我通常都會採用局部組建去維護，提高界面的簡潔程度。
filters 使用技巧
數據過濾無疑也是 vue 的重要功能之一。像時間、數字的過濾，實在是太頻繁了。掌握 filter 無疑能大大提高代碼幸福度和可維護性
filter 使用簡介
同 component 一樣 filter 也分為全局過濾器和局部過濾器。
- 全局過濾器
vue.filter('date', function (value1, value2, ...) {
return '處理之後的結果'
})
複製代碼
- 局部過濾器
export default {
filters: {
date (value1, value2, ...) {
return '處理之後的結果'
}
}
}
複製代碼
- 使用方式(不管是全局的還是局部的使用方式都一樣):
// 不帶參數
{{value1 | date}}
// 帶參數
{{value1 | date(value2, ...)}}
// 多個過濾器
{{value1 | filter1 | filter2}}
複製代碼
注意：第一個參數是管道符 (|) 前面的值
常見的使用場景
我大部分都是使用的全局過濾器。像局部過濾器，一是獲取到原始數據的時候可以直接進行處理，二是發現早期使用的局部過濾器都升級為全局過濾器了。如果你有好的局部過濾器場景歡迎評論
- 日期處理。後端傳的數據要麼是 2019-03-14 09:00:00 這種字符串類型的。要麼就是時間戳類型的，但是界面通常只會展示一部分，比如只展示年月日，或者是月日啊。因此有個全局 date 過濾器，幸福到哭。這個過濾器最好是同時支持以上倆種格式。要是不知道
- 數字處理。像保留幾位小數、超過多少位以字母 w 代替，或者是漢字“億”都很常見
上面倆種是我碰到的最多的，也歡迎你評論補充。
總結
該用 filters 的地方千萬別手軟，超過一處就要寫成公共的。否則後期要是邏輯處理的不對，你不知道哪些地方用了相同的處理邏輯很容易造成 bug 漏改的情況。
mixins 使用場景
這個屬性也分為全局和局部使用，全局使用了將會對之後的所有組件產生影響。因此我不建議在業務代碼中使用全局 mixins。而且感覺全局 mixins 使用起來不利於代碼維護，你想突然在 template 中使用了一個一個函數第一想法肯定是去 methods 中查找，找不到就很難受了。而且破壞性也比較大，所以我都採用局部注入的方式。讓別人知道這裡採用了 mixins，要是遇到了一些奇怪的情況，他知道這裡有 mixins 就會主動去這裡面查看相關代碼了。
這個屬性我用的最多的是引用第三方的列表庫的時候他通常都會有個 formatter 的格式化數據屬性。這裡 filters 是用不了的。但像列表對於數據的處理重複性是特別多的，因此 注入一個 mixins 就方便多了。
一些第三方庫時用到的技巧
router 中用到的一些技巧
- 鉤子函數 beforeEach 做路由跳轉的時候會先執行 beforeEach 。因此你可以在路由跳轉的時候進行判定是否可以跳轉，常見場景就是判定用戶是否登錄，有沒有某個頁面的權限
// to: Route: 即將要進入的目標 路由對象
// from: Route: 當前導航正要離開的路由
// next: Function: 一定要調用該方法來 resolve 這個鉤子。執行效果依賴 next 方法的調用參數。
next(): 進行管道中的下一個鉤子。如果全部鉤子執行完了，則導航的狀態就是 confirmed (確認的)。
router.beforeEach((to, form, next) => {})
複製代碼
vuex 中用到的一些技巧
- action 的技巧 action 是可以異步執行方法的。我在業務中通常會遇到這樣的情況：獲取某種信息，但是這個信息接口多個頁面都用到了，每個頁面都處理一下這個接口真的很麻煩。所以傳入 vuex 中共享這部分信息就十分幸福了。因為是異步的所以用到了 action。提供一個參考代碼：
actions: {
getMemberShip ({ state, commit }) {
return new Promise((resolve, reject) => {
if (!state.memberShip) {
// memberShip 為 ajax 請求方法
memberShip(state.userInfo).then(res => {
commit('setMemberShip', res)
resolve(res)
}).catch(err => {
reject(err)
})
} else {
resolve(state.memberShip)
}
})
},
}
複製代碼
這個是我定義的一個獲取會員套餐的情況，會員套餐很多個頁面都會用到。但是他改動次數頻繁，而且也沒必要用戶一登錄就去加載，因此使用 action 存起來。如果沒有這個值就執行 ajax 請求，如果有就直接返回結果。
echarts
echarts 圖表界的老大哥了，支持 N 多種圖表，配置項說好幾千應該沒誇大其詞吧。不過也正因為繁多的配置項才給了你更多的自由配置的可能。那用 echarts 有什麼技巧呢？
- 快速定位配置項
echarts 包含標題、圖例、提示框、標註、標線... ... 等控件，調整個樣式真的不好找。但是現在官方新加入了一個術語速查手冊，之前我都是去舊官方上查，現在新官方上有了這個東西可是有福了。我需要調整那個控件的效果在上面一點就帶我到相應的 API 簡直是好用到飛起。
2. 優化項目代碼 不是專門的數據展示項目，用到的圖表類型其實不多。通常是一個圖表反覆用，而 echarts 配置一個圖表通常都好幾十行代碼。把這個配置項拿出去只傳進來一個參數代碼多整潔。這個實現特別簡單，要是還沒這麼做建議馬上優化你的項目哦axios
axios 是類似於 ajax 的的第三方控件。所以這個我也是蠻有想法跟大家交流的。
- 我在開發中遇到一個坑，官方文檔說支持 IE，但是 IE 壓根不支持。是因為 axios 底層是用 promise 寫的，IE 壓根還不支持這個屬性，因此需要引入 profill 。解決辦法是引入 babel-polyfill
// 步驟1
npm install --save babel-polyfill
// 步驟2 在 vue.config.js 文件中加入以下內容
module.exports = {
configureWebpack: config => {
return {
entry: {
app:['babel-polyfill', './src/main.js']
}
}
}
}
