一、mixin 混入对象

1. （混入）功能

功能：可以把多个组件共用的配置提取成一个混入对象，简单来说就是多个组件共享一个配置。

2. mixin 和 Vuex 的区别

Vuex 是 状态共享管理，所以 Vuex 中的 所有变量和方法都是可以读取和更改并相互影响的；

mixin 可以 定义公用的变量或方法，但是 mixin 中的 数据是不共享的，也就是每个组件中的 mixin 实例都是不一样的，都是 单独存在的个体，不存在相互影响的；

3. mixin 与组件的区别

组件：组件可以扩展 HTML 元素，封装可重⽤的代码。在父组件中引入组件，相当于在父组件中给出一片独立的空间供子组件使用，然后根据 props 来传值，但本质上两者是相对独立的。

Mixins：则是在引入组件之后与组件中的对象和方法进行合并，相当于扩展了父组件的对象与方法，可以理解为形成了一个新的组件。

4. mixin 怎么用

mixin 的用法：定义一个 js文件将 export default 中的共有内容写到里面，然后在组件中 import，放到 mixin 数组中

举个🌰：定义一个混入对象

把混入对象混入到当前的组件中

5.mixins 的特点

a. 方法和数据在各组件中不共享

混合对象中的参数数据num

组件1中的数据 num 进行 +1 的操作

组件2中的数据 num 未进行操作

看两组件中分别输出的 num 值

可以看到，我在组件 1 里改变了 num 里面的值，组件 2 中的 num 值还是混入对象里的初始值

b. 值为对象的选项，如 methods,components 等，选项会被合并，键冲突的组件会覆盖混入对象的

mixin 混入对象中的方法

组件中的方法

打印台的输出

c. 值为函数的选项，如 created,mounted 等，就会被合并调用，混合对象里的钩子函数在组件里的钩子函数之前调用

mixin 混入对象函数中的 console

组件函数中的 console

打印台的打印

6. 全局混入

// 为自定义的选项 'myOption' 注入一个处理器。
Vue.mixin({
  created: function () {
    var myOption = this.$options.myOption
    if (myOption) {
      console.log(myOption)
    }
  }
})

new Vue({
  myOption: 'hello!'
})
// => "hello!"

请谨慎使用全局混入，因为它会影响每个单独创建的 Vue 实例 (包括第三方组件)。大多数情况下，只应当应用于自定义选项，就像上面示例一样。推荐将其作为插件发布，以避免重复应用混入。

7. 优缺点

优点：多个组件相同逻辑如何抽离

缺点:不可知，不易维护因为你可以在 mixins 里几乎可以加任何代码，props、data、methods、各种东西，就导致如果不了解 mixins 封装的代码的话，是很难维护的

vue: mixin