初探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）执行规则 -- 选项合并

当组件和混入对象含有同名选项时，选项将以恰当的方式“合并”。

1. Data数据，数据对象在内部进行递归合并，并在发生冲突时以组件数据优先；
2. 钩子函数，created、mounted等同名钩子函数会合并成一个数组，都将被调用。混入对象钩子函数优先执行；
3. 对象选项：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) {
  // 返回合并后的值
}

后记

以上就是胡哥今天给大家分享的内容，喜欢的小伙伴记得收藏、转发、点击右下角按钮在看，推荐给更多小伙伴呦，欢迎多多留言交流...

胡哥有话说，一个有技术，有情怀的胡哥！京东开放平台首席前端攻城狮。与你一起聊聊大前端，分享前端系统架构，框架实现原理，最新最高效的技术实践！

长按扫码关注，更帅更漂亮呦！关注胡哥有话说公众号，可与胡哥继续深入交流呦！

胡哥有话说