初探Vue的Mixin混入
问候语
在停更了近一周之后（假期已完美结束），胡哥又开启了文章的每日更新，与大家一起分享、讨论大前端的技术原理与项目实践。抽丝剥茧，让技术方案可见可闻；归纳整理，让知识体系成长可依。欢迎更多的小伙伴关注、分享《胡哥有话说》公众号，让胡哥与你一起：流年笑掷，未来可期。
前言
今天胡哥要与大家分享的是Vue.js的混入（Mixin）(注意：此处不是乱入，偷笑.png)，Vue的混入（Mixin）提供了一种分发Vue中可复用功能的能力，简单、方便、灵活。
混入(Mixin)特点
混入对象可以包含任意组件选项，可以定义Data、methods、Components、LifeCycle Hooks（生命周期函数）、Directives（指令）、路由钩子函数等。
项目实践
有时需要在项目的多个组件中复用一些用户操作提示的功能：操作成功、操作失败、数据加载Loading状态，我们就可以借助Vue的混入（Mixin）功能来实现。
当然实现相同的功能的方法有很多种：比如自己定义一个UI组件库、比如使用第三方库等等，混入（Mixin）是条条大路通罗马的其中一条路。
说一千，道一万，不如来段代码看一看。
@/utils/mixins.js
/**
* 定义混合Mixin对象，公共功能复用
*/
let myMixin = {
data () {
return {
visible: false
}
},
methods: {
// 展示Loading
showLoading () {
this.visible = true
},
// 隐藏Loading
hideLoading () {
this.visible = false
}
},
created () {
console.log('Mixin混入中的生命周期created')
}
}
export default myMixin
xxx.vue 某Vue文件 --- 局部混入
<script>
import myMixin from '@/utils/mixins'
export default {
name: 'xxx',
// 允许混入多个对象
mixins: [
myMixin
],
created () {
// 调用myMixin的方法
this.showLoading()
// 输出myMixin的数据变量
console.log(this.visible)
}
}
</script>
混入（Mixin）执行规则 -- 选项合并
当组件和混入对象含有同名选项时，选项将以恰当的方式“合并”。
- Data数据，数据对象在内部进行递归合并，并在发生冲突时以组件数据优先；
- 钩子函数，
created、mounted等同名钩子函数会合并成一个数组，都将被调用。混入对象钩子函数优先执行； - 对象选项：
components、````methods、directives```等对象，会被合并为同一对象。如果出现了相同键值对，则当前组件中的键具有优先级
慎用全局混入
如果使用了全局混入，那么将影响每一个新创建的Vue实例
main.js
import Vue from 'vue'
import myMixin from '@/utils/mixins'
/**
* 全局混入
* 每个实例中都可以调用混入的myMixin对象
*/
Vue.mixin(myMixin)
扩展
在Vue中同时是支持自定义合并策略的，可以向Vue.config.optionMergeStrategies中添加处理函数
Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) {
// 返回合并后的值
}
后记
以上就是胡哥今天给大家分享的内容，喜欢的小伙伴记得收藏、转发、点击右下角按钮在看，推荐给更多小伙伴呦，欢迎多多留言交流...
胡哥有话说，一个有技术，有情怀的胡哥！京东开放平台首席前端攻城狮。与你一起聊聊大前端，分享前端系统架构，框架实现原理，最新最高效的技术实践！