vue的高级实战技巧

作者: 是一只猫诶 | 来源:发表于2019-12-05 16:22 被阅读0次

vue的高级实战技巧
《前端工程师必备技能Vue移动开发实战技巧》——读后感
vue 高级技巧
SwiftUI 内功之如果View作为参数传递给组件Toast组
Vue.js项目实战
Vue实战技巧
Vue的钩子事件和程序化侦听
1.初识 Vue.js
人物面部光影后期处理技巧
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函数来优化，我们先看下一值多判的情况：

<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
    }
  ]
})

项目目录结构