夏眠不觉晓，到处蚊子咬，夜来键盘声，发落知多少?javascript
天天都在写代码，虽然手底下快马加鞭的敲，可是该来的加班仍是会来的，如何能更快的完成手头的工做，提升本身的开发效率，今天小编给你们带来了这几个Vue小技巧，终于能够在六点像小鹿同样奔跑着下班了。 先赞后看，艳遇不断，哈哈哈哈html
学会使用
$attrs与$listeners，二次包装组件就靠它了
前几天产品经理给我甩过来一份管理系统的设计原型，我打开看了看，虽然心里是拒绝的，可是为了活着，仍是要作的。小编看了看原型，发现系统中的大部分弹框右下角都是肯定和取消两个按钮。若是使用element-ui提供的Dialog，那么每个弹框都要手动加按钮，不但代码量增多，并且后面若是按钮UI，需求发生变化，改动量也比较大。前端
若是能够将Dialog进行二次封装，将按钮封装到组件内部，就能够不用重复去写了。说干就干。java
定义基本弹框代码
<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>真正想成为一名前端架构师，要跟一群架构师交流才能高效的成长，
个人架构师扣扣裙 519293536 一块儿讨论交流技术进步吧！
经过上面的代码，咱们已经将按钮封装到组件内部了，效果以下图所示：webpack
<!--外部使用方式 confirm cancel 是自定义的事件 opened是包装el-dialog的事件，经过$listeners传入到el-dialog里面--> <custom-dialog :visible.sync="visibleDialog" @opened="$_handleOpened" @confirm="$_handleConfirm" @cancel="$_handleCancel">这是一段内容</custom-dialog> 复制代码
效果图web
但上面的代码存在一个问题，没法将Dialog自身的属性和事件暴露到外部（虽然能够经过props及$emit一个一个添加，可是很麻烦）,这时候就可使用$attrs与$listenerselement-ui
使用$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,但能够定义多个.sync v-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.js import { 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 } }, created() { 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 实例 (包括第三方组件)。大多数状况下，只应当应用于自定义选项，
最后我想说：真正想成为一名前端架构师，要跟一群架构师交流才能高效的成长，个人架构师扣扣裙 519293536 一块儿讨论交流技术进步吧！
本文的文字及图片来源于网络加上本身的想法,仅供学习、交流使用,不具备任何商业用途,版权归原做者全部,若有问题请及时联系咱们以做处理