[[278967]]

最近倆月正好用 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 中用到的一些技巧

鉤子函數 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 簡直是好用到飛起。

 

優化項目代碼 不是專門的數據展示項目，用到的圖表類型其實不多。通常是一個圖表反復用，而 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'] 
            } 
        } 
    } 
} 

擁有自己的 axios 默認配置 這個代碼過長，我就不分享了。想要可以關注公眾號入群交流(二維碼在底部)

總結

本來還想在醞釀醞釀，不過近期發現在不總結一下自己就快漸漸的忘記了，其中還有很多東西沒寫出來，像項目優化技巧，指令系統。但是這篇文字已經很長了。所以只能到這里了，如果你覺得對你有用歡迎點贊，如果你想跟我交流獲得指導歡迎關注公眾號加我微信進行探討。