vue 中indexof_这些技巧，检测你是否真正掌握了Vue

  随着这几年前端技术快速发展，Vue框架在国内普及率极高，人人都会用，那Vue如何写得比别人优雅？如何写得比别人漂亮？ 鉴于一线互联网大厂在前沿技术领域的持续研究和大规模投入，直接向他们取经，是最便捷也是最高效的学习方式。但对于中小公司工作的程序员来说，平时忙碌于业务代码，却很少有机会接触到大厂的优秀实践。 本文将介绍一些大厂Vue项目的最佳实践：

01

一劳永逸的组件注册 通常在组件使用前，需要引入后再注册，但如果高频组件多了后，每次都这样做，不仅新增很多代码，效率还低！我们应该如何优化呢？ 其实，我们可以借助一下webpack的require.context() 方法来创建自己的(模块)上下文，从而实现自动动态require组件。 我们先在components文件夹(这里面都是些高频组件)添加一个叫global.js的文件，在这个文件里使用require.context 动态将需要的高频组件统统打包进来，然后在main.js文件中引入global.js的文件。

//  global.js文件import Vue from 'vue'function changeStr (str) {  return str.charAt(0).toUpperCase() + str.slice(1)}const requireComponent = require.context('./', false, /\.vue$/)// 查找同级目录下以vue结尾的组件const install = () => {  requireComponent.keys().forEach(fileName => {    let config = requireComponent(fileName)    console.log(config) // ./child1.vue 然后用正则拿到child1    let componentName = changeStr(      fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')    )    Vue.component(componentName, config.default || config)  })}export default {  install // 对外暴露install方法}

最后我们就可以随时随地在页面中使用这些高频组件，无需再手动一个个引入了。

02

高精度权限控制— 自定义指令directive 我们通常给一个元素添加 v-if / v-show 来做权限管理，但如果判断条件繁琐且多个地方需要判断，这种方式的代码不仅不优雅而且冗余。 针对这种情况，我们可以通过全局自定义指令来处理：我们先在新建个 array.js 文件，用于存放与权限相关的全局函数:

// array.jsexport function checkArray (key) {  let arr = ['1', '2', '3', '4', 'demo']  let index = arr.indexOf(key)  if (index > -1) {    return true // 有权限  } else {    return false // 无权限  }}

然后在将 array 文件挂载到全局中:

// main.jsimport { checkArray } from "./common/array";Vue.directive("permission", {  inserted (el, binding) {    let permission = binding.value; // 获取到 v-permission的值    if (permission) {      let hasPermission = checkArray(permission);      if (!hasPermission) { // 没有权限 移除Dom元素        el.parentNode && el.parentNode.removeChild(el);      }    }  }});

最后我们在页面中就可以通过自定义指令 v-permission 来判断：

权限按钮1 // 会显示    权限按钮2  // 无显示    权限按钮3 // 会显示

以上是我分享几个Vue大厂实战经验。 大家有没有想过一个问题？随着前端面试要求越来越高，像Vue这样的框架已经是基本功，我们凭什么敢说比别人厉害呢？

• 我们都会写组件，但是你知道怎么让组件能够成为高复用性的组件库型组件吗？

• 我们都会项目打包上线，但是你知道如何编写配置文件能让打包速度最优化吗？

• 我们都会写路由，但是你知道如何写才能保证多路由模块解耦，保证更方便增加新的路由模块吗？

说来说去，大家都知道前端全方面学习需要完整的前端思路实践教学，小编这边准备了一份 前端路径完整图 供大家学习： 扫码领取 前端工程师学习成长思维导图 遇到扫码频繁，请再次识别哦！ (别让您的犹豫阻碍您的进步) 相信大家都知道，积累优秀实战经验已经成为区分前端水平高低的评判标准，我们网易云课堂这边每周都有前端课程，欢迎大家来学习Vue的源码、框架等技术......   福利总览：

• 完整版高级前端工程师学习成长路径
• 网易内部前端学习资料
• 本周免费直播课专属提醒
• 预约网易技术大咖定制专属1v1计划

8.6—8. 10前端直播课程 一、技巧：《会用还要懂源码，带你学习vue-router源码解析》 1、vue-router的原理 2、vue-router源码解析 3、手写一个基础的vue-router 二、实战：《前端性能优化，如何突破页面性能瓶颈》 1、SSR与CSR的优缺点 2、SSR与CSR的不同的应用场景 3、SSR的具体流程 三、项目：《用API层封装为你的项目加速》 1、如何管理自己的项目API层  2、axios拦截思路 3、如何二次封装请求库 …… 每周更新，请持续关注！ 扫码领取   0元前端进阶系列直播课  遇到扫码频繁，请再次识别哦！ (别让您的犹豫阻碍您的进步) 更有网易前端进阶资料包免费赠送！