前言：
到现在用Vue做了不少项目了，用到的都是初阶的功能，很多高阶能力都没有用到。仅用初级阶段也能做项目，甚至是复杂项目，可见vue之强大，果然是渐进式开发方式。
但是本着虚心学习的态度，还是要抽空看看高阶知识，暂且不论何时会用到。
说明：不知道官网的示例代码是用了什么项目构建方式，这里我将示例改写成我本地的构建方式。
我本地是用vue-cli3.0命令构建，默认结构。
代码编辑器：vscode
项目结构如图：
下面开始学习：
混入
1.基础
混入（mixin）提供了一种灵活的方式，来分发Vue组件中的可复用功能。一个混入对象可以包含任意组件选项。
首先来实现第一个例子
pages下新建一个组件文件 myMixin.vue
pages/myMixin.vue
<template>
<div>这是混入的内容</div>
</template> <script>
export default {
created: function () {
this.hello()
},
methods: {
hello: function () {
console.log('hello from mixin!')
}
}
}
</script>
回到home.vue
导入myMixin.vue，设置mixins选项的值
import myMixin from './myMixin'
pages/home.vue
<template>
<div>首页内容展示容器</div>
</template> <script>
import myMixin from './myMixin'
export default {
mixins: [myMixin]
}
</script>
这时运行起来能看到home的内容将显示myMixin的内容。
2.选项合并
（1）数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。
pages/myMixin.vue 添加代码：
data: function () {
return {
message: 'hello',
foo: 'abc'
}
},现在，pages/home.vue 代码如下：
<template>
<div>首页内容展示容器</div>
</template> <script>
import myMixin from './myMixin'
export default {
mixins: [myMixin],
data: function () {
return {
message: 'goodbye',
bar: 'def'
}
},
created: function () {
console.log(this.$data)
}
}
</script>
console打印的结果是
{
bar: "def",
foo: "abc",
message: "goodbye"
}（2）同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。
（3）值为对象的选项，例如methods、components和directives，将被合并为同一个对象，两个对象键名冲突时，取组件对象的键值对。
3.全局混入
可以用来为自定义选项注入处理逻辑
// 为自定义的选项 'myOption' 注入一个处理器。
Vue.mixin({
created: function () {
var myOption = this.$options.myOption
if (myOption) {
console.log(myOption)
}
}
}) new Vue({
myOption: 'hello!'
})
// => "hello!"
推荐将其作为插件发布，以避免重复应用混入。
4.自定义选项合并策略
默认是简单地覆盖已有值。如果想让自定义选项以自定义逻辑合并，可以向Vue.config.optionMergeStrategies添加一个函数
Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) {
// 返回合并后的值
}对于多数值为对象的选项，可以使用与methods相同的合并策略：
var strategies = Vue.config.optionMergeStrategies
strategies.myOption = strategies.methods
本文内容摘自Vue官方文档——混入 https://cn.vuejs.org/v2/guide/mixins.html