【vue系列】項目開發中常用的Vue小技巧--全局註冊過濾器，全局組件註冊，不同路由的組件複用

一、前言

vue的使用過程中會遇到各種場景，當普通使用時覺得沒什麼，但是或許優化一下可以更高效更優美地進行開發。下面有一些我在日常開發的時候用到的小技巧

 

二、全局註冊過濾器

1、正常寫法

之前我是這麼寫的過濾器的，在具體頁面中。

 filters: {
      roleFilter(val) {
        //處理邏輯
        if (val === 1) return '管理員'
        if (val === 2) return '辦公室人員'
        if (val === 3) return '監督人員'
        if (val === 4) return '普通用戶'
        else return '-'
      }
    },

但是我們做項目來說，大部分的過濾器是要全局使用的，不會每每用到就在組件裏面去寫，抽成全局的會更好些。官方文檔：https://cn.vuejs.org/v2/guide/filters.html

/src/main.js

/*filter*/
Vue.filter('roleFilter',function (val) {
  if (val === 1) return '管理員'
  if (val === 2) return '辦公室人員'
  if (val === 3) return '監督人員'
  if (val === 4) return '普通用戶'
  else return '-'
})

這樣在頁面上就可以直接使用`roleFilter`這個過濾器。

<el-table-column
        label="角色"
        width="100">
        <template slot-scope="scope">
          {{scope.row.authority | roleFilter}}
        </template>
</el-table-column>

如果項目用到很多的過濾器，都寫在這裏main.js中，不美觀不直接，因此可以抽出成單獨文件。

2、優化寫法

我們可以抽出到獨立文件，然後使用Object.keys在main.js入口統一註冊

/src/utils/filters.js

/*人員角色 轉換器*/
let filterTeam = function(val){
  if (val === 1) return '管理員'
  if (val === 2) return '辦公室人員'
  if (val === 3) return '監督人員'
  if (val === 4) return '普通用戶'
  else return '-'
}

export { filterTeam }

/src/main.js

/*引入全局過濾器*/
import * as fliterCommon from '../src/utils/filters'
Object.keys(fliterCommon).forEach(key => Vue.filter(key, fliterCommon[key]))

然後在其他的.vue 文件中就可愉快地使用這些我們定義好的全局過濾器了

 <el-table-column
        label="角色"
        width="100">
        <template slot-scope="scope">
          {{scope.row.authority | filterTeam}}
        </template>
</el-table-column>

 

三、全局組件註冊

1、一般情況

寫了一堆基礎UI組件，然後每次我們需要使用這些組件的時候，都得先import，然後聲明components，很繁瑣，這裏可以使用統一註冊的形式

 

2、優化寫法

我們需要藉助一下神器webpack，使用 require.context() 方法來創建自己的模塊上下文，從而實現自動動態require組件。這個方法需要3個參數：要搜索的文件夾目錄、是否還應該搜索它的子目錄、以及一個匹配文件的正則表達式。我們在components文件夾添加一個叫 componentRegister .js的文件，在這個文件裏藉助webpack動態將需要的基礎組件統統打包進來。

/src/components/ componentRegister .js

文件結構

這裏對組件名做了判斷，如果是index的話就取組件中的name屬性處理後作爲註冊組件名， 所以最後註冊的組件爲：multi-condition、 basic-table最後我們在main.js中import 'components/ componentRegister .js'，然後我們就可以隨時隨地使用這些基礎組件，無需手動引入了~

 

四、不同路由的組件複用

1、一般使用

當某個場景中vue-router從/post-page/a，跳轉到/post-page/b。然後我們驚人的發現，頁面跳轉後數據竟然沒更新？！原因是vue-router"智能地"發現這是同一個組件，然後它就決定要複用這個組件，所以你在created函數裏寫的方法壓根就沒執行。通常的解決方案是監聽$route的變化來初始化數據，如下：

 

2、優化方法

爲了實現這樣的效果可以給 router-view添加一個不同的key，這樣即使是公用組件，只要url變化了，就一定會重新創建這個組件。

<router-view :key = "$route.fullpath"></router-view>

還可以在其後加 ++newDate()時間戳，保證獨一無二。

如果組件被放在 <keep-alive>中的話，可以把獲取新數據的方法放在activated鉤子，代替原來在created、mounted鉤子中獲取數據的任務。