前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue大厂最佳实践

Vue大厂最佳实践

作者头像
浪里行舟
发布2021-02-25 17:17:07
7600
发布2021-02-25 17:17:07
举报
文章被收录于专栏:前端学习心得

随着这几年前端技术快速发展,Vue框架在国内普及率极高,人人都会用,那Vue如何写得比别人优雅?如何写得比别人漂亮?

鉴于一线互联网大厂在前沿技术领域的持续研究和大规模投入,直接向他们取经,是最便捷也是最高效的学习方式。但对于中小公司工作的程序员来说,平时忙碌于业务代码,却很少有机会接触到大厂的优秀实践。本文将介绍大厂一些Vue的最佳实践

一劳永逸的组件注册

通常在组件使用前,需要引入后再注册,但如果高频组件多了后,每次都这样做,不仅新增很多代码,效率还低!我们应该如何优化呢?

其实,我们需要借助一下webpack的require.context() 方法来创建自己的(模块)上下文,从而实现自动动态require组件。

我们先在components文件夹(这里面都是些高频组件)添加一个叫global.js的文件,在这个文件里使用require.context 动态将需要的高频组件统统打包进来。然后在main.js文件中引入global.js的文件。

代码语言:javascript
复制
//  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方法
}
代码语言:javascript
复制
// main.js
import index from './components/global.js'
Vue.use(index)

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

简单暴力的router key

我们在项目开发时,可能会遇到这样问题:当页面切换到同一个路由但不同参数地址时,比如/detail/1,跳转到/detail/2,页面跳转后数据竟然没更新?

代码语言:javascript
复制
// 路由配置如下:
 {
     path: "/detail/:id",
     name:"detail",
     component: Detail
 }

这是因为vue-router会识别出两个路由使用的是同一个组件从而进行复用,并不会重新创建组件,而且组件的生命周期钩子自然也不会被触发,导致跳转后数据没有更新。那我们如何解决这个问题呢? 我们可以为router-view组件添加属性key

代码语言:javascript
复制
<router-view :key="$route.fullpath"></router-view>

高精度权限控制--自定义指令directive

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

代码语言:javascript
复制
// array.js
export function checkArray (key) {
  let arr = ['1', '2', '3', '4', 'demo']
  let index = arr.indexOf(key)
  if (index > -1) {
    return true // 有权限
  } else {
    return false // 无权限
  }
}

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

代码语言:javascript
复制
// main.js
import { checkArray } from "./common/array";
Vue.config.productionTip = false;
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来判断:

代码语言:javascript
复制
 <div class="btns">
    <button v-permission="'1'">权限按钮1</button>  // 会显示
    <button v-permission="'10'">权限按钮2</button> //无显示
    <button v-permission="'demo'">权限按钮3</button> // 会显示
  </div>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一劳永逸的组件注册
  • 简单暴力的router key
  • 高精度权限控制--自定义指令directive
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档