mixin是什么

Mixin是面向对象程序设计语言中的类，提供了方法的实现。其他类可以访问mixin类的方法而不必成为其子类

Mixin类通常作为功能模块使用，在需要该功能时“混入”，有利于代码复用又避免了多继承的复杂

#Vue中的mixin
先来看一下官方定义

mixin（混入），提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。

本质其实就是一个js对象，它可以包含我们组件中任意功能选项，如

data、components、methods、created、computed等等

我们只要将共用的功能以对象的方式传入 mixins选项中，当组件使用 mixins对象时所有mixins对象的选项都将被混入该组件本身的选项中来

在Vue中我们可以局部混入跟全局混入

局部混入

定义一个mixin对象，有组件options的data、methods属性

var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}

组件通过mixins属性调用mixin对象

1
2
3

Vue.component('componentA',{
  mixins: [myMixin]
})

该组件在使用的时候，混合了mixin里面的方法，在自动执行created生命钩子，执行hello方法
这样在组件中不需要重复定义 methods 中的 hello 方法了。

全局混入

通过Vue.mixin()进行全局的混入

Vue.mixin({
  created: function () {
      console.log("全局混入")
    }
})

使用全局混入需要特别注意，因为它会影响到每一个组件实例（包括第三方组件）

PS：全局混入常用于插件的编写

注意事项：

当组件存在与mixin对象相同的选项的时候，进行递归合并的时候组件的选项会覆盖mixin的选项，
组件中的 同名的 优先级 高 ！！！！！！！！！！！！！

但是如果相同选项为生命周期钩子的时候，会合并成一个数组，先执行mixin的钩子，再执行组件的钩子。
生命周期函数比较特殊，都会保留，然后 先执行 mixin 里面的，然后在执行组件里面的！！！！！！

下面是关于Vue的几种类型的合并策略

替换型
合并型
队列型
叠加型

替换型合并有props、methods、inject、computed

和并型合并有：data

mergeData函数遍历了要合并的 data 的所有属性，然后根据不同情况进行合并：

当目标 data 对象不包含当前属性时，调用 set 方法进行合并（set方法其实就是一些合并重新赋值的方法）
当目标 data 对象包含当前属性并且当前值为纯对象时，递归合并当前对象值，这样做是为了防止对象存在新增属性

队列型合并有：全部生命周期和watch

叠加型合并有：component、directives、filters

小结：

替换型策略有props、methods、inject、computed，就是将新的同名参数替代旧的参数
合并型策略是data, 通过set方法进行合并和重新赋值
队列型策略有生命周期函数和watch，原理是将函数存入一个数组，然后正序遍历依次执行
叠加型有component、directives、filters，通过原型链进行层层的叠加

https://v2.cn.vuejs.org/v2/guide/mixins.html