Mix(混入)配置项

Mixin 提供了一种非常灵活的方式来分发 Vue 组件中的可复用功能。一个 mixin 对象可以包含任意组件选项。当组件使用 mixin 对象时，所有 mixin 对象的选项将被**“混合”进入该组件本身的选项**。

功能：可以把多个组件共用的配置提取成一个混入对象

// 定义一个 mixin 对象
const myMixin = {
  created() {
    this.hello()
  },
  methods: {
    hello() {
      console.log('hello from mixin!')
    },
  },
}

// 定义一个使用此 mixin 对象的应用
const app = Vue.createApp({
  mixins: [myMixin],
})

app.mount('#mixins-basic') // => "hello from mixin!"

使用混入

1. 全局混入 app.mixin(xxx)
2. 局部混入 mixins:['xxx']

全局 Mixin

可以为 Vue 应用程序全局应用 mixin，但使用时需格外小心！一旦使用全局 mixin，它将影响每一个 之后创建的组件 (例如，每个子组件)。

const app = Vue.createApp({
  myOption: 'hello!', // 自定义一个选项
})

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

// 将myOption也添加到子组件
app.component('test-component', {
  myOption: 'hello from component!',
})

app.mount('#mixins-global')

// => "hello!"
// => "hello from component!"

在大多数情况下，全局 Mixin 都应当只应用于自定义选项，像上面示例一样。并且推荐将其作为插件发布，以避免重复应用 mixin。

选项合并

当组件和 mixin 对象含有同名选项时，这些选项将以恰当的方式进行“合并”。

1. 比如，每个 mixin 可以拥有自己的  data  函数，每个  data  函数都会被调用，并将返回结果合并。在数据的 property 发生冲突时，会以组件自身的数据优先。

   const myMixin = {
     data() {
       return {
         message: 'hello',
         foo: 'abc',
       }
     },
   }
   
   const app = Vue.createApp({
     mixins: [myMixin],
     data() {
       return {
         message: 'goodbye',
         bar: 'def',
       }
     },
     created() {
       console.log(this.$data) // => { message: "goodbye", foo: "abc", bar: "def" }
     },
   })
   

2. 同名钩子函数将合并为一个数组，因此都将被调用。另外，mixin 对象的钩子将在组件自身钩子之前调用。

   const myMixin = {
     created() {
       console.log('mixin 对象的钩子被调用')
     },
   }
   
   const app = Vue.createApp({
     mixins: [myMixin],
     created() {
       console.log('组件钩子被调用')
     },
   })
   
   // => "mixin 对象的钩子被调用"
   // => "组件钩子被调用"
   

3. 值为对象的选项，例如  methods、components  和  directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。

   const myMixin = {
     methods: {
       foo() {
         console.log('foo')
       },
       conflicting() {
         console.log('from mixin')
       },
     },
   }
   
   const app = Vue.createApp({
     mixins: [myMixin],
     methods: {
       bar() {
         console.log('bar')
       },
       conflicting() {
         console.log('from self')
       },
     },
   })
   
   const vm = app.mount('#mixins-basic')
   
   vm.foo() // => "foo"
   vm.bar() // => "bar"
   vm.conflicting() // => "from self"
   

与 vuex 的区别

• vuex：用来做状态管理的，里面定义的变量在每个组件中均可以使用和修改，在任一组件中修改此变量的值之后，其他组件中此变量的值也会随之修改。
• Mixins：可以定义共用的变量，在每个组件中使用，引入组件中之后，各个变量是相互独立的，值的修改在组件中不会相互影响。

与公共组件的区别

• 组件：在父组件中引入组件，相当于在父组件中给出一片独立的空间供子组件使用，然后根据 props 来传值，但本质上两者是相对独立的。
• Mixins：则是在引入组件之后与组件中的对象和方法进行合并，相当于扩展了父组件的对象与方法，可以理解为形成了一个新的组件。

Reference

• https://www.jianshu.com/p/bcff647d24ec (opens new window)