【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钩子中获取数据的任务。