可以复用的组件，我们一般会抽离，写成公共的模块。
可以复用的方法，我们一般会抽离，写成公共的函数。
那么 在 Vue 中，如果 某几个组件实例 VueComponent 中、或者 整个 Vue 项目中 都存在相同的配置，那就需要用到 mixin 这个方法了
混入 (mixin) ：提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。
首先、我们需要明白第一点，mixin 是一个对象，而且是包含组件中任意配置项的对象，也就是说，创建组件的时候，我们传递的 data、component、methods、computed、directives、生命周期钩子函数 等等 一系列配置项 都可以作为 mixin 对象的键值对。
其次、我们创建的 mixin 对象，在组件中引用的时候，mixin 对象 中的键值对会 混入 该组件的配置详项中，至于是怎么混入的，下面在讲。
创建 mixin
这个 mixin 对象 中，配置了一个 created 钩子函数，和 methods 对象，如果我们单独把这个配置写在组件中的话，那就是组件在初始化的时候，就会调用 hello()
// 定义一个混入对象
var myMixin = {
created: function () {
this.hello()
},
methods: {
hello: function () {
console.log('hello from mixin!')
}
}
}创建一个 mixin 混入对象是很简单的，只是我们需要注意的是，配置的键值对，只能是创建组件时传入的配置项，如果你传了一个 其他不存在的属性 ，组件接收之后，是不会对其解析的，就相当于你在组件内部，定义了一个不存在属性，Vue 底层是不会管这个玩意的。
但是，实例对象上是存在你混入的这个属性的，下面的自定义混入会说到
const mixin = {
msg: '这是混入的msg',
created: () => {
console.log("mixin混入对象的钩子被调用!");
},
};
const vm1 = Vue.extend({
template: `<div>123</div> `,
mixins:[mixin]
})
const vm = new Vue({
el: '#root1',
mixins: [mixin]
})
console.dir(vm1, 'vm1')
console.dir(vm, 'vm')分别打印出两个实例对象，左边是 组件实例对象，右边是 Vue 实例对象(可以看到其中存在 el 属性)。我们发现，两者都是存在混入的数据的 ，且混入的自定义数据已经被平铺出来了。
使用 mixin 混入
创建了一个 mixin 对象之后，组件需要使用的时候，就和引入公共组件和公共方法一样。至于其中的内容，还是使用上面定义的
比如：我在 src 目录下新建了一个 mixin 文件夹，和一个 index.js 文件，那我在引用的时候就正常引入，至于 你是 默认暴露还是分别暴露，那就看个人习惯了。
import {mixin} from '@/mixin/index'然后在组件配置项中，配置一个 mixins 属性，值是一个数组。
export default {
name: 'HelloWorld',
mixins:[mixin]
}刷新页面，你会发现控制台上已经输出了 我想要的结果
mixin 选项合并
因为 mixin 混入对象 中的配置，是包含组件中任意配置项的对象，如果我的 mixin 混入对象中定义的配置，和组件内部定义的配置出现了同名了，那 Vue 是怎么合并这两个选项的呢？
data数据对象：在内部会进行递归合并，并在发生冲突时以组件数据优先
var mixin = {
data: function () {
return {
message: 'hello',
foo: 'abc'
}
}
}
new Vue({
mixins: [mixin],
data: function () {
return {
message: 'goodbye',
bar: 'def'
}
},
created: function () {
console.log(this.$data)
// => { message: "goodbye", foo: "abc", bar: "def" }
}
})同名钩子函数 ：将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子 之前 调用。
export const mixin = {
created: () => {
console.log("mixin混入对象的钩子被调用!");
},
};
export default {
name: 'HelloWorld',
mixins: [mixin],
created: function () {
console.log('组件钩子被调用')
}
}
值为对象的选项：例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。
export const mixin = {
created: () => {
console.log("mixin混入对象的钩子被调用!");
},
methods: {
foo: () => {
console.log("foo");
},
conflicting: () => {
console.log("from mixin");
},
},
};
export default {
name: "HelloWorld",
mixins: [mixin],
created: () => {
console.log("组件钩子被调用");
},
methods: {
bar: () => {
console.log("bar");
},
conflicting: () => {
console.log("from self");
},
},
};在组件中调用这三个方法，看看在控制台上输出的是啥
<div @click="bar">bar</div>
<div @click="conflicting">conflicting</div>
<div @click="foo">foo</div>
可以看到，mixin 混入对象中存在的 foo 函数，和 conflicting函数，而组件中 存在 bar函数 和 conflicting 函数。在组件中能成功调用这三个方法，说明 mixin 混入对象中的 foo 函数，已经被合并到了组件的 methods 对象中。而 conflicting 函数执行之后，根据打印出的值，发现该函数执行的是 组件内部定义的 conflicting 函数。这就说明两个对象键名冲突时，取组件对象的键值对。
全局混入
上面讲的都是在组件内部混入，其实也可以在全局中混入。在 mian.js 中，当 执行 new Vue ( ) 之前，可以通过 Vue.mixin() 函数，向其内部传入一个 mixin 混入对象，Vue 底层就会将混入对象挂载到Vue全局上。
Vue.mixin({
created: () => {
console.log('我在全局混入了created钩子函数');
},
});
new Vue({
render: h => h(App),
}).$mount('#app')但是这样存在一个问题，就是如果我在全局通过 Vue.mixin() 混入了配置，那么我所有的组件 (包括第三方组件) 都会混入这个配置，这样可能会导致组件配置混乱冗余，甚至覆盖第三方组件的配置导致程序出错。
上面我在全局混入了 一个 钩子函数，导致这个钩子函数执行了三次，这是因为，在 new Vue() 的时候执行了一次，App组件中执行了一次，在 HelloWorld 组件也执行了一次。这就看出来很多余了。
自定义混入
区别：通过 Vue.mixin() 混入的是正常混入，直接写在 new Vue() 中（或者是组件中）的是自定义混入。通过Vue.config.optionMergeStrategies 添加的也是自定义混入
Vue.mixin({
created: function () {
var myOption = this.$options.myOption
if (myOption) {
console.log(myOption)
}
}
})
new Vue({
myOption: 'hello!'
})
这里只打印了一次，代表只在 new Vue（）的时候执行了一次。大多数情况下，全局的混入只应当应用于自定义选项，这样可以避免上面的副作用。
自定义选项将使用默认策略，即简单地覆盖已有值。
我先正常混入了一个 myOption 属性，值为 123。
Vue.mixin({
myOption:'123',
});打印vm实例，$options 对象中存在该键值对
直接在 new Vue() 中定义 同名属性，值为 abc
const vm = new Vue({
myOption:'abc',
render: h => h(App),
}).$mount('#app')打印 vm实例对象，发现属性值已经更改。
如果想让自定义选项以自定义逻辑合并，可以向 Vue.config.optionMergeStrategies 添加一个函数，那我们来看看 Vue.config.optionMergeStrategies 是个啥
打印出来一看， 好家伙，这不就是 Vue 实例上的所有方法么。按文档的意思，我好像也可以自定义的往这里面加我自己的方法。
var strategies = Vue.config.optionMergeStrategies;
strategies.myOption = "123";我随便往里面加了一个 myOption 属性，值为 123，打印出来之后，确实存在设置的属性和值
我默认在 new Vue（）的时候，注入了一个自定义的选项。这个时候，我们打印这个接收到的vm实例对象，能在 $options 里面找到该属性,且它的值就是我设置的 hello
通过 Vue.config.optionMergeStrategies 添加一个同名的属性 ，但是这个属性值是一个函数，且没有返回值。然后打印vm实例对象会发现 $options 里面的 myOption 属性值 变成了undefined，函数没有返回值，那肯定是undefined。
增加一个 返回值 abc，再来看看。
上面的例子只是做一个演示，表示这个 也可以 通过 Vue.config.optionMergeStrategies 来覆盖之前的 自定义 选项，同时还可以让自定义选项以自定义逻辑合并
Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) {
// 接收两个参数，返回合并后的值,toVal - 现在定义的值,fromVal - 之前定义的值
console.log(toVal, fromVal, "toVal, fromVal");
return "aaaaaaa";
};Vue.config.optionMergeStrategies 对象
Vue.config.optionMergeStrategies 对象 中存在的属性之前说过了，就是 实例对象上的属性和方法。那这么多方法 在合并的时候都是怎么合并的呢？这个就需要去源码里面瞅一瞅了。
总结
总结：
1、mixin 混入是一个对象，对象的配置项就是 创建组件 时传入的 options 配置项
2、在组件内混入时，增加引入 mixin 对象，配置项中新增 mixins:['xxx']。全局混入时 Vue.mixin()
3、正常混入( 在组件中新增配置项 或在全局中使用 Vue.mixin() ) 和 自定义混入的方式( new Vue() 中增加自定义项 或使用 Vue.config.optionMergeStrategies )还是存在区别的文章来源：https://www.toymoban.com/news/detail-613235.html
4、混入的规则文章来源地址https://www.toymoban.com/news/detail-613235.html
- 普通的js原始值（string，number，boolean等）直接覆盖，以组件值为主。
- 对象的合并，如果合并双方都是对象，则使用递归的方式将其合并，以组件对象为主。
- 对于函数，如果需要他们合并后都可以执行，则可以考虑将函数合并成数组，然后你可以将其包装成一个新函数，依次调用合并后数组中的函数。生命周期钩子函数就是这样，最后是先执行混入的钩子，在执行自己的钩子。
- 如果合并的是一些特殊对象，不能递归合并，那么根据情况，你还可以使用原型链的方式进行合并。
到了这里，关于Vue mixin 混入的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
