作者：前端进击者

转发链接：

前言

夏眠不觉晓，处处蚊子咬，夜来键盘声，发落知多少?

每天都在写代码，虽然手底下马不停蹄的敲，但是该来的加班还是会来的，如何能更快的完成手头的工作，提高自己的开发效率，今天小编给大家带来了这几个Vue小技巧，终于可以在六点像小鹿一样奔跑着下班了。 先赞后看，艳遇不断，哈哈哈哈

学会使用$attrs 与 $listeners，二次包装组件就靠它了

前几天产品经理给我甩过来一份管理系统的设计原型，我打开看了看，虽然内心是拒绝的，但是为了活着，还是要做的。小编看了看原型，发现系统中的大部分弹框右下角都是确定和取消两个按钮。如果使用element-ui提供的Dialog，那么每一个弹框都要手动加按钮，不但代码量增多，而且后面如果按钮UI，需求发生变化，改动量也比较大。

如果可以将Dialog进行二次封装，将按钮封装到组件内部，就可以不用重复去写了。说干就干。

定义基本弹框代码

<template>  <el-dialog :visible.sync="visibleDialog">    <!--内容区域的默认插槽-->    <slot></slot>    <!--使用弹框的footer插槽添加按钮-->    <template #footer>      <!--对外继续暴露footer插槽，有个别弹框按钮需要自定义-->      <slot name="footer">        <!--将取消与确定按钮集成到内部-->        <span>          <el-button @click="$_handleCancel">取 消</el-button>          <el-button type="primary" @click="$_handleConfirm">            确 定          </el-button>        </span>      </slot>    </template>  </el-dialog></template><script>export default {  props: {    // 对外暴露visible属性，用于显示隐藏弹框    visible: {      type: Boolean,      default: false    }  },  computed: {    // 通过计算属性，对.sync进行转换，外部也可以直接使用visible.sync    visibleDialog: {      get() {        return this.visible;      },      set() {        this.$emit("update:visible");      }    }  },  methods: {    // 对外抛出cancel事件    $_handleCancel() {      this.$emit("cancel");    },    // 对外抛出 confirm事件    $_handleConfirm() {      this.$emit("confirm");    }  }};</script>复制代码

通过上面的代码，我们已经将按钮封装到组件内部了，效果如下图所示：

<!--外部使用方式 confirm cancel 是自定义的事件 opened是包装el-dialog的事件，通过$listeners传入到el-dialog里面--><custom-dialog :visible.sync="visibleDialog" @opened="$_handleOpened" @confirm="$_handleConfirm" @cancel="$_handleCancel">这是一段内容</custom-dialog>复制代码

效果图

但上面的代码存在一个问题，无法将Dialog自身的属性和事件暴露到外部（虽然可以通过props及$emit一个一个添加，但是很麻烦）,这时候就可以使用$attrs与$listeners

使用$attrs与$listeners

$attrs: 当组件在调用时传入的属性没有在props里面定义时，传入的属性将被绑定到$attrs属性内（class与style除外，他们会挂载到组件最外层元素上）。并可通过v-bind="$attrs"传入到内部组件中

$listeners: 当组件被调用时，外部监听的这个组件的所有事件都可以通过$listeners获取到。并可通过v-on="$listeners"传入到内部组件中。

修改弹框代码

<!---使用了v-bind与v-on监听属性与事件--><template>    <el-dialog :visible.sync="visibleDialog" v-bind="$attrs" v-on="$listeners">    <!--其他代码不变-->    </el-dialog></template><script>  export default {    //默认情况下父作用域的不被认作 props 的 attribute 绑定 (attribute bindings)     //将会“回退”且作为普通的 HTML attribute 应用在子组件的根元素上。    //通过设置 inheritAttrs 到 false，这些默认行为将会被去掉    inheritAttrs: false }</script><!---外部使用方式--><custom-dialog  :visible.sync="visibleDialog"  title="测试弹框"  @opened="$_handleOpened">  这是一段内容</custom-dialog>复制代码

对于$attrs，我们也可以使用$props来代替,实现代码如下

<template>  <el-dialog :visible.sync="visibleDialog" v-bind="$props" v-on="$listeners">    <!--其他代码不变-->  </el-dialog></template><script>import { Dialog } from 'element-ui'export default {  props: {    // 将Dialog的props通过扩展运算符展开到props属性里面    ...Dialog.props  }}</script>复制代码

但上面的代码存在一定的缺陷，有些组件存在非props的属性，比如对于一些封装的表单组件，我们可能需要给组件传入原生属性，但实际原生属性并没有在组件的props上面定义，这时候，如果通过上面的方式去包装组件，那么这些原生组件将无法传递到内部组件里面。

感谢@陌上兮月的提醒

使用require.context实现前端工程自动化

require.context是一个webpack提供的Api,通过执行require.context函数获取一个特定的上下文,主要是用于实现自动化导入模块。

什么时候用？ 当一个js里面需要手动引入过多的其他文件夹里面的文件时，就可以使用。

在Vue项目开发过程中，我们可能会遇到这些可能会用到require.context的场景

当我们路由页面比较多的时候，可能会将路由文件拆分成多个，然后再通过import引入到index.js路由主入口文件中当使用svg symbol时候，需要将所有的svg图片导入到系统中（建议使用svg-sprite-loader）开发了一系列基础组件，然后把所有组件都导入到index.js中，然后再放入一个数组中，通过遍历数组将所有组件进行安装。

对于上述的几个场景，如果我们需要导入的文件比较少的情况下，通过import一个一个去导入还可以接受，但对于量比较大的情况，就变成了纯体力活，而且每次修改增加都需要在主入口文件内进行调整。这时候我们就可以通过require.context去简化这个过程。

现在以上述第三条为例,来说明require.context的用法

常规用法

组件通过常规方式安装

require.context基本语法

通过require.context安装Vue组件

自定义v-model,原来这么简单

在用Vue开发前端时，不论使用原生还是封装好的UI库，对于表单组件，一般都会使用到v-model。虽然v-model是一个语法糖，但是吃到嘴里挺甜的啊。学会自定义v-model，还是很有必要的。

基本用法

一个组件上的v-model默认是通过在组件上面定义一个名为value的props,同时对外暴露一个名为input的事件。

源码：

使用方式：

自定义属性与事件

通常情况下，使用value属性与input事件没有问题，但是有时候有些组件会将value属性或input事件用于不同的目的，比如对于单选框、复选框等类型的表单组件的value属性就有其他用处，参考（developer.mozilla.org/en-US/docs/…）。或者希望属性名称或事件名称与实际行为更贴切，比如active,checked等属性名。

使用.sync,更优雅的实现数据双向绑定

在Vue中，props属性是单向数据传输的,父级的prop的更新会向下流动到子组件中，但是反过来不行。可是有些情况，我们需要对prop进行“双向绑定”。上文中，我们提到了使用v-model实现双向绑定。但有时候我们希望一个组件可以实现多个数据的“双向绑定”，而v-model一个组件只能有一个(Vue3.0可以有多个)，这时候就需要使用到.sync。

.sync与v-model的异同

相同点：

两者的本质都是语法糖，目的都是实现组件与外部数据的双向绑定两个都是通过属性+事件来实现的

不同点(个人观点，如有不对，麻烦下方评论指出，谢谢)：

一个组件只能定义一个v-model,但可以定义多个.syncv-model与.sync对于的事件名称不同，v-model默认事件为input,可以通过配置model来修改，.sync事件名称固定为update:属性名自定义.sync

在开发业务时，有时候需要使用一个遮罩层来阻止用户的行为（更多会使用遮罩层+loading动画），下面通过自定义.sync来实现一个遮罩层

<!--调用方式--><template>  <custom-overlay :visible.sync="visible" /></template><script>export default {  data() {    return {      visible: false    }  }}</script>复制代码

动态组件，让页面渲染更灵活

前两天产品经理来了新的需求了，告诉我，需要根据用户的权限不同，页面上要显示不同的内容，然后我就哼哧哼哧的将不同权限对应的组件写了出来，然后再通过v-if来判断要显示哪个组件，就有了下面的代码

但是看到上面代码的那一长串v-if,v-else-if,我感觉我的代码洁癖症要犯了，不行，这样code review过不了关，我连自己这一关都过不了，这时候就该动态组件发挥作用了。

<template>  <div class="info">    <component :is="roleComponent" v-if="roleComponent" />  </div></template><script>import AdminInfo from './admin-info'import BookkeeperInfo from './bookkeeper-info'import HrInfo from './hr-info'import UserInfo from './user-info'export default {  components: {    AdminInfo,    BookkeeperInfo,    HrInfo,    UserInfo  },  data() {    return {      roleComponents: {        admin: AdminInfo,        bookkeeper: BookkeeperInfo,        hr: HrInfo,        user: UserInfo      },      role: 'user',      roleComponent: undefined    }  },  created() {    const { role, roleComponents } = this    this.roleComponent = roleComponents[role]  }}</script>复制代码

mixins，更高效的实现组件内容的复用

mixins是Vue提供的一种混合机制，用来更高效的实现组件内容的复用。怎么去理解混入呢，我觉得和Object.assign，但实际与Object.assign又有所不同。

基本示例

在开发echarts图表组件时，需要在窗口尺寸发生变化时，重置图表的大小，此时如果在每个组件里面都去实现一段监听代码，代码重复太多了，此时就可以使用混入来解决这个问题

// 混入代码 resize-mixins.jsimport { debounce } from 'lodash'const resizeChartMethod = '$__resizeChartMethod'export default {  data() {    // 在组件内部将图表init的引用映射到chart属性上    return {      chart: null    }  },  created() {    window.addEventListener('resize', this[resizeChartMethod])  },  beforeDestroy() {    window.removeEventListener('reisze', this[resizeChartMethod])  },  methods: {    // 通过lodash的防抖函数来控制resize的频率    [resizeChartMethod]: debounce(function() {      if (this.chart) {        this.chart.resize()      }    }, 100)  }}复制代码

<!--图表组件代码--><template>  <div class="chart"></div></template><script>import echartMixins from './echarts-mixins'export default {  // mixins属性用于导入混入，是一个数组，数组可以传入多个混入对象  mixins: [echartMixins],  data() {    return {      chart: null    }  },  mounted() {    this.chart = echarts.init(this.$el)  }}</script>复制代码

不同位置的混入规则

在Vue中，一个混入对象可以包含任意组件选项，但是对于不同的组件选项，会有不同的合并策略。

data 对于data,在混入时会进行递归合并，如果两个属性发生冲突，则以组件自身为主，如上例中的chart属性生命周期钩子函数

对于生命周期钩子函数，混入时会将同名钩子函数加入到一个数组中，然后在调用时依次执行。混入对象里面的钩子函数会优先于组件的钩子函数执行。如果一个组件混入了多个对象，对于混入对象里面的同名钩子函数，将按照数组顺序依次执行，如下代码:

const mixin1 = {  created() {    console.log('我是第一个输出的')  }}const mixin2 = {  created() {    console.log('我是第二个输出的')  }}export default {  mixins: [mixin1, mixin2],  created() {    console.log('我是第三个输出的')  }}复制代码

其他选项 对于值为对象的选项，如methods,components,filter,directives,props等等，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。全局混入

混入也可以进行全局注册。一旦使用全局混入，那么混入的选项将在所有的组件内生效，如下代码所示：

Vue.mixin({  methods: {    /**     * 将埋点方法通过全局混入添加到每个组件内部     *      * 建议将埋点方法绑定到Vue的原型链上面，如： Vue.prototype.$track = () => {}     * */    track(message) {      console.log(message)    }  }})复制代码

请谨慎使用全局混入，因为它会影响每个单独创建的 Vue 实例 (包括第三方组件)。大多数情况下，只应当应用于自定义选项，

最后我想说： 不要吹灭你的灵感和你的想象力; 不要成为你的模型的奴隶。 ——文森特・梵高

推荐Vue学习资料文章：

《探索 Vue-Multiselect》

《细品30张脑图带你从零开始学Vue》

《Vue后台项目中遇到的技术难点以及解决方案》

《手把手教你Electron + Vue实战教程（五）》

《手把手教你Electron + Vue实战教程（四）》

《手把手教你Electron + Vue实战教程（三）》

《手把手教你Electron + Vue实战教程（二）》

《手把手教你Electron + Vue实战教程（一）》

《收集22种开源Vue模板和主题框架「干货」》

《如何写出优秀后台管理系统？11个经典模版拿去不谢「干货」》

《手把手教你实现一个Vue自定义指令懒加载》

《基于 Vue 和高德地图实现地图组件「实践」》

《一个由 Vue 作者尤雨溪开发的 web 开发工具—vite》

《是什么让我爱上了Vue.js》

《1.1万字深入细品Vue3.0源码响应式系统笔记「上」》

《1.1万字深入细品Vue3.0源码响应式系统笔记「下」》

《「实践」Vue 数据更新7 种情况汇总及延伸解决总结》

《尤大大细说Vue3 的诞生之路「译」》

《提高10倍打包速度工具Snowpack 2.0正式发布，再也不需要打包器》

《大厂Code Review总结Vue开发规范经验「值得学习」》

《Vue3 插件开发详解尝鲜版「值得收藏」》

《带你五步学会Vue SSR》

《记一次Vue3.0技术干货分享会》

《Vue 3.x 如何有惊无险地快速入门「进阶篇」》

《「干货」微信支付前后端流程整理(Vue+Node)》

《带你了解 vue-next（Vue 3.0）之 炉火纯青「实践」》

《「干货」Vue+高德地图实现页面点击绘制多边形及多边形切割拆分》

《「干货」Vue+Element前端导入导出Excel》

《「实践」Deno bytes 模块全解析》

《细品pdf.js实践解决含水印、电子签章问题「Vue篇」》

《基于vue + element的后台管理系统解决方案》

《Vue仿蘑菇街商城项目（vue+koa+mongodb）》

《基于 electron-vue 开发的音乐播放器「实践」》

《「实践」Vue项目中标配编辑器插件Vue-Quill-Editor》

《基于 Vue 技术栈的微前端方案实践》

《消息队列助你成为高薪 Node.js 工程师》

《Node.js 中的 stream 模块详解》

《「干货」Deno TCP Echo Server 是怎么运行的？》

《「干货」了不起的 Deno 实战教程》

《「干货」通俗易懂的Deno 入门教程》

《Deno 正式发布，彻底弄明白和 node 的区别》

《「实践」基于Apify+node+react/vue搭建一个有点意思的爬虫平台》

《「实践」深入对比 Vue 3.0 Composition API 和 React Hooks》

《前端网红框架的插件机制全梳理（axios、koa、redux、vuex）》

《深入Vue 必学高阶组件 HOC「进阶篇」》

《深入学习Vue的data、computed、watch来实现最精简响应式系统》

《10个实例小练习，快速入门熟练 Vue3 核心新特性（一）》

《10个实例小练习，快速入门熟练 Vue3 核心新特性（二）》

《教你部署搭建一个Vue-cli4+Webpack移动端框架「实践」》

《2020前端就业Vue框架篇「实践」》

《详解Vue3中 router 带来了哪些变化？》

《Vue项目部署及性能优化指导篇「实践」》

《Vue高性能渲染大数据Tree组件「实践」》

《尤大大细品VuePress搭建技术网站与个人博客「实践」》

《10个Vue开发技巧「实践」》

《是什么导致尤大大选择放弃Webpack？【vite 原理解析】》

《带你了解 vue-next（Vue 3.0）之 小试牛刀【实践】》

《带你了解 vue-next（Vue 3.0）之 初入茅庐【实践】》

《实践Vue 3.0做JSX(TSX)风格的组件开发》

《一篇文章教你并列比较React.js和Vue.js的语法【实践】》

《手拉手带你开启Vue3世界的鬼斧神工【实践】》

《深入浅出通过vue-cli3构建一个SSR应用程序【实践】》

《怎样为你的 Vue.js 单页应用提速》

《聊聊昨晚尤雨溪现场针对Vue3.0 Beta版本新特性知识点汇总》

《【新消息】Vue 3.0 Beta 版本发布，你还学的动么？》

《Vue真是太好了 壹万多字的Vue知识点 超详细!》

《Vue + Koa从零打造一个H5页面可视化编辑器——Quark-h5》

《深入浅出Vue3 跟着尤雨溪学 TypeScript 之 Ref 【实践】》

《手把手教你深入浅出vue-cli3升级vue-cli4的方法》

《Vue 3.0 Beta 和React 开发者分别杠上了》

《手把手教你用vue drag chart 实现一个可以拖动 / 缩放的图表组件》

《Vue3 尝鲜》

《总结Vue组件的通信》

《Vue 开源项目 TOP45》

《2020 年，Vue 受欢迎程度是否会超过 React？》

《尤雨溪：Vue 3.0的设计原则》

《使用vue实现HTML页面生成图片》

《实现全栈收银系统（Node+Vue）（上）》

《实现全栈收银系统（Node+Vue）（下）》

《vue引入原生高德地图》

《Vue合理配置WebSocket并实现群聊》

《多年vue项目实战经验汇总》

《vue之将echart封装为组件》

《基于 Vue 的两层吸顶踩坑总结》

《Vue插件总结【前端开发必备】》

《Vue 开发必须知道的 36 个技巧【近1W字】》

《构建大型 Vue.js 项目的10条建议》

《深入理解vue中的slot与slot-scope》

《手把手教你Vue解析pdf(base64)转图片【实践】》

《使用vue+node搭建前端异常监控系统》

《推荐 8 个漂亮的 vue.js 进度条组件》

《基于Vue实现拖拽升级（九宫格拖拽）》

《手摸手，带你用vue撸后台 系列二(登录权限篇)》

《手摸手，带你用vue撸后台 系列三(实战篇)》

《前端框架用vue还是react？清晰对比两者差异》

《Vue组件间通信几种方式，你用哪种？【实践】》

《浅析 React / Vue 跨端渲染原理与实现》

《10个Vue开发技巧助力成为更好的工程师》

《手把手教你Vue之父子组件间通信实践讲解【props、$ref 、$emit】》

《1W字长文+多图，带你了解vue的双向数据绑定源码实现》

《深入浅出Vue3 的响应式和以前的区别到底在哪里？【实践】》

《干货满满!如何优雅简洁地实现时钟翻牌器(支持JS/Vue/React)》

《基于Vue/VueRouter/Vuex/Axios登录路由和接口级拦截原理与实现》

《手把手教你D3.js 实现数据可视化极速上手到Vue应用》

《吃透 Vue 项目开发实践｜16个方面深入前端工程化开发技巧【上】》

《吃透 Vue 项目开发实践｜16个方面深入前端工程化开发技巧【中】》

《吃透 Vue 项目开发实践｜16个方面深入前端工程化开发技巧【下】》

《Vue3.0权限管理实现流程【实践】》

《后台管理系统，前端Vue根据角色动态设置菜单栏和路由》

作者：前端进击者

转发链接：