vue的高级实战技巧

今天从四个方面给大家分享一下vue的实战技巧
1.全局组件注册
2.render函数拯救繁乱的template
3.vue权限控制
4.路由的优化
下面我们开始吧！

全局组件注册

先看看我们平时注册组件是如何做的

微信图片_20191018153204.png

当我们需要在HelloWorld里面引入child1和child2的时候，我们一般先通过import导入这两个文件，然后通过components注册，这样就能使用了，这只是在一个文件里面引入，如果还有别的文件也需要引入，我们又得这样重复一遍，或者说如果HelloWorld还需要引入几十个组件，按照这个写法会显得非常的繁琐而且低效，那怎么写才能更高效呢？且看下面：

微信图片_20191018153929.png

首先我们在与组件同级的地方新建一个golbal.js,这个js的作用就是帮助我们全局组件注册，其中require.context它是一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块，它接收三个参数：
1.directory {String} -读取文件的路径
2.useSubdirectories {Boolean} -是否遍历文件的子目录
3.regExp {RegExp} -匹配文件的正则

requireComponent.keys()获取到的是一个数组，

微信图片_20191021111704.png

接着匹配 / 和.vue中间的字符串并且用过changeStr()方法将首字符转换为大写，这个得到的就是我们需要的组件名称。最后通过Vue.component()方法注册
注意：哪些组件可以全局注册？如果只是用到一次两次的可以不需要注册为全局的，如果是频繁使用的，比如弹窗，提示语在很多页面都会用到，这种情况下就可以使用全局注册了。

最后还有一点，需要在main.js里面进入global.js

render函数拯救繁乱的template

因为template存在一值多判的情况，这样就会导致代码冗余，代码杂乱的结果，这种时候就可以使用render函数来优化，我们先看下一值多判的情况：

那么我们如何使用render来优化呢？
首先父组件

render组件：

vue权限控制

当我们需要根据某些特殊的权限对应显示页面的操作的时候，一般情况下我们是这样写

这种写法存在安全问题，现在我们可以写一个全局的权限控制指令
首先我们新建一个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里面使用自定义指令

  
我是权限1
 

路由引入优化

通常情况下我们的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
    }
  ]
})

项目目录结构

WechatIMG456.jpeg

以上就是vue的一些实战技巧，也可以说是优化技巧。