今天从四个方面给大家分享一下vue的实战技巧
1.全局组件注册
2.render函数拯救繁乱的template
3.vue权限控制
4.路由的优化
下面我们开始吧！
全局组件注册
先看看我们平时注册组件是如何做的
当我们需要在HelloWorld里面引入child1和child2的时候，我们一般先通过import导入这两个文件，然后通过components注册，这样就能使用了，这只是在一个文件里面引入，如果还有别的文件也需要引入，我们又得这样重复一遍，或者说如果HelloWorld还需要引入几十个组件，按照这个写法会显得非常的繁琐而且低效，那怎么写才能更高效呢？且看下面：
首先我们在与组件同级的地方新建一个golbal.js,这个js的作用就是帮助我们全局组件注册，其中require.context它是一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块，它接收三个参数：
1.directory {String} -读取文件的路径
2.useSubdirectories {Boolean} -是否遍历文件的子目录
3.regExp {RegExp} -匹配文件的正则
接着匹配 / 和.vue中间的字符串并且用过changeStr()方法将首字符转换为大写，这个得到的就是我们需要的组件名称。最后通过Vue.component()方法注册
注意：哪些组件可以全局注册？如果只是用到一次两次的可以不需要注册为全局的，如果是频繁使用的，比如弹窗，提示语在很多页面都会用到，这种情况下就可以使用全局注册了。
最后还有一点，需要在main.js里面进入global.js
render函数拯救繁乱的template
因为template存在一值多判的情况，这样就会导致代码冗余，代码杂乱的结果，这种时候就可以使用render函数来优化，我们先看下一值多判的情况：
<template>
<div v-if="value === 1">
<button>按钮1</button>
</div>
<div v-if="value === 2">
<button>按钮1</button>
</div>
<div v-if="value === 3">
<button>按钮1</button>
</div>
</template>
那么我们如何使用render来优化呢？
首先父组件
<template>
<div id="app">
<Button
:type="type"
:text="text"
@myEvent="myDemo">
</Button>
</div>
</template>
<script>
import Button from './button'
export default {
name: 'App',
data(){
return{
type:'danger',
text:1
}
},
compontents:{Button},
methods:{
myDemo(){
console.log(111)
}
}
}
</script>
render组件：
<script>
export default {
name: 'Button',
props:{
type:{
type:String,
defalut:'normal'
},
text:{
type:String,
defalut:'normal'
}
},
render(h){
return h('button',{
//v-bind:class
class:{
'btn':true,
'btn-success': this.type === 'success',
'btn-danger': this.type === 'danger',
'btn-warning': this.type === 'warning',
'normal' : !this.type
},
//dom
domprops:{
innerText: this.text || '默认'
},
on:{
click: handleClck
}
})
},
methods:{
handleClck(){
this.$emit('myEvent')
}
}
}
</script>
<style>
.btn {
width: 100px;
height: 40px;
line-height: 40px;
color: #ffffff;
}
.btn-success {
background: green;
}
.btn-danger {
background: red;
}
.btn-warning {
background: orange;
}
.btn-normal {
background: gray;
}
</style>
vue权限控制
当我们需要根据某些特殊的权限对应显示页面的操作的时候，一般情况下我们是这样写
<template>
<div id="app">
<div v-show="isShow">
<div>我是权限1</div>
</div>
<div>
<div>我是权限2</div>
</div>
<div>
<div>我是权限3</div>
</div>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return {
isShow:false
}
}
}
</script>
这种写法存在安全问题，现在我们可以写一个全局的权限控制指令
首先我们新建一个array.js
export function checkArray(key){
//权限数组
let arr = ['1','2','3',5];
let index = arr.indexOf(key);
if(index > -1){
return
} else {
return false
}
}
然后在main.js里面引入这个方法，并写一个指令
import {checkArray} from './assets/common/array.js'
Vue.config.productionTip = false
Vue.directive('display-key',{
inserted(el,binding){
let displayKey = binding.value;
if(displayKey){
let hasPermission = checkArray(displayKey);
//如果没有权限则删除dom
if(!hasPermission){
el.parentNode && el.parentNode.removeChild(el);
}
} else {
throw new Error('需要传key')
}
}
})
最后在dom里面使用自定义指令
<div v-display-key="'1'">
<div>我是权限1</div>
</div>
路由引入优化
通常情况下我们的router.js是这样的
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
这只是一个路由，如果有几十个甚至上百个呢，再使用这样的写法会显得太凌乱，并且很不好维护，接下来我们可以优化下
router.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
//重点
const routerList = [];
function importAll(r){
r.keys().forEach(
(key) => routerList.push(r(key).default)
);
}
importAll(require.context('.',true,/\.router\.js/));
export default new Router({
routes: [
...routerList,
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
项目目录结构
以上就是vue的一些实战技巧，也可以说是优化技巧。
