一、前言
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`这个过滤器。
{{scope.row.authority | roleFilter}}
如果项目用到很多的过滤器,都写在这里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 文件中就可愉快地使用这些我们定义好的全局过滤器了
{{scope.row.authority | filterTeam}}
三、全局组件注册
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变化了,就一定会重新创建这个组件。
还可以在其后加 ++newDate()
时间戳,保证独一无二。
如果组件被放在
中的话,可以把获取新数据的方法放在activated钩子,代替原来在created、mounted钩子中获取数据的任务。