久等了，提升開發效率的 vue 技巧來了

最近倆月正好用 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。自身完成單擊操做和讀秒操做便可，不須要對引用的地方產生任何影響。

// 最後每一個頁面調用的時候大概長這個樣子<auth-code :phone="phone" type="1"></auth-code>

收藏組件的複用

收藏功能使用的頻率要比驗證碼更高，固然也更難。

像我最近作的大數據項目，用戶能夠對視頻、音樂、話題進行收藏。同時他們出現的地方也很是多，像視頻列表、音樂列表、話題列表、視頻詳情、音樂詳情、話題詳情... ... 都會有收藏的功能，不抽象成一個組件一樣的邏輯寫好幾個地方後期維護是及其困難的。

像這種收藏，一般都會須要一個 id，是否收藏狀態，以及完成收藏後的一系列的跳轉功能。所以須要倆個參數: id 和 status。和 complete 回調方法

// 最後每一個頁面調用的時候大概長這個樣子<collection :id="id" :status="status" @complete="complete"></collection>

我上面提到我會收藏音樂、視頻、話題，很顯然是三個收藏接口。難道要寫三個收藏組件麼？固然不是，既然同屬於收藏功能，天然是一個組件搞定了。再加一個 type 參數區別一下便可了

// 最後每一個頁面調用的時候大概長這個樣子<collection :id="id" :status="status" type="video" @complete="complete"></collection>

這樣每次用到收藏的時候我只須要複製這一行代碼就能夠了

總結

第三方 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 中用到的一些技巧

1. 鉤子函數 beforeEach 作路由跳轉的時候會先執行 beforeEach 。所以你能夠在路由跳轉的時候進行斷定是否能夠跳轉，常見場景就是斷定用戶是否登陸，有沒有某個頁面的權限

// to: Route: 即將要進入的目標 路由對象
// from: Route: 當前導航正要離開的路由
// next: Function: 必定要調用該方法來 resolve 這個鉤子。執行效果依賴 next 方法的調用參數。
next(): 進行管道中的下一個鉤子。若是所有鉤子執行完了，則導航的狀態就是 confirmed (確認的)。router.beforeEach((to, form, next) => {})

vuex 中用到的一些技巧

1. 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 有什麼技巧呢？

1. 快速定位配置項

echarts 包含標題、圖例、提示框、標註、標線... ... 等控件，調整個樣式真的很差找。可是如今官方新加入了一個術語速查手冊，以前我都是去舊官方上查，如今新官方上有了這個東西但是有福了。我須要調整那個控件的效果在上面一點就帶我到相應的 API 簡直是好用到飛起。

2. 優化項目代碼 不是專門的數據展現項目，用到的圖表類型其實很少。一般是一個圖表反覆用，而 echarts 配置一個圖表一般都好幾十行代碼。把這個配置項拿出去只傳進來一個參數代碼多整潔。這個實現特別簡單，要是還沒這麼作建議立刻優化你的項目哦

axios

axios 是相似於 ajax 的的第三方控件。因此這個我也是蠻有想法跟你們交流的。

1. 我在開發中遇到一個坑，官方文檔說支持 IE，可是 IE 壓根不支持。是由於 axios 底層是用 promise 寫的，IE 壓根還不支持這個屬性，所以須要引入 profill 。解決辦法是引入 babel-polyfill

// 步驟1npm install --save babel-polyfill// 步驟2 在 vue.config.js 文件中加入如下內容module.exports = { configureWebpack: config => { return { entry: { app:['babel-polyfill', './src/main.js'] } } }}

2. 擁有本身的 axios 默認配置 這個代碼過長，我就不分享了。想要能夠關注公衆號入羣交流（二維碼在底部）

總結

原本還想在醞釀醞釀，不過近期發如今不總結一下本身就快漸漸的忘記了，其中還有不少東西沒寫出來，像項目優化技巧，指令系統。可是這篇文字已經很長了。因此只能到這裏了，若是你以爲對你有用歡迎點贊，若是你想跟我交流得到指導歡迎關注公衆號加我微信進行探討。

本文分享自微信公衆號 - 點滴前端（DDIWEB）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。