多个实例引用了相同或相似的方法或属性等，可将这些重复的内容抽取出来作为mixins的js，export出去，在需要引用的vue文件通过mixins属性注入，与当前实例的其他内容进行merge。

mixins 就是混入。

一个混入对象可以包含任意组件选项。同一个生命周期，混入对象会比组件的先执行。

//暴露两个mixins对象
export const mixinsTest1 = {
    methods: {
        hello1() {
            console.log("hello1");
        }
    },
    created() {
        this.hello1();
    },
}


export const mixinsTest2 = {
    methods:{
        hello2(){
            console.log("hello2");
        }
    },
    created() {
        this.hello2();
    },
}

<template>
<div>
    home
</div>
</template>
<script>
import {mixinsTest1,mixinsTest2} from '../util/test.js'
export default {
  name: "Home",
  data () {
    return {
    };
  },
  created(){
      console.log("1212");
  },
  mixins:[mixinsTest2,mixinsTest1] // 先调用哪个mixins对象，就先执行哪个
}
</script>

hello2
hello1
1212

[vue] 说说你对vue的mixin的理解，有什么应用场景？

类似于Object.asign()
主要用于为Vue扩展功能

@censek

mixins 就是混入。

一个混入对象可以包含任意组件选项。同一个生命周期，混入对象会比组件的先执行。

//暴露两个mixins对象
export const mixinsTest1 = {
    methods: {
        hello1() {
            console.log("hello1");
        }
    },
    created() {
        this.hello1();
    },
}


export const mixinsTest2 = {
    methods:{
        hello2(){
            console.log("hello2");
        }
    },
    created() {
        this.hello2();
    },
}

<template>
<div>
    home
</div>
</template>
<script>
import {mixinsTest1,mixinsTest2} from '../util/test.js'
export default {
  name: "Home",
  data () {
    return {
    };
  },
  created(){
      console.log("1212");
  },
  mixins:[mixinsTest2,mixinsTest1] // 先调用哪个mixins对象，就先执行哪个
}
</script>

hello2
hello1
1212

学到了

Vue2混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。混入分两类：组件级混入和全局混入。到了vue3，使用hooks来复用功能

合并策略为：

1. 数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。
2. 同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。
3. 值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。

在Vue中，Mixin（混入）是一种用于复用组件选项的方式。Mixin可以包含组件的各种选项，如数据、计算属性、方法、生命周期钩子等，并将其混合到多个组件中，实现代码的复用和共享。

使用场景

代码复用：

当多个组件之间存在一些相似的逻辑、功能或样式时，可以将这部分共享的代码抽取到Mixin中，并在多个组件中混入使用。这样可以避免重复编写相同的代码，提高代码的复用性和可维护性。

跨组件通用逻辑：

当多个组件需要共享某些通用逻辑、方法或状态时，可以将这些逻辑封装在Mixin中，并在需要的组件中混入使用。这样可以实现跨组件的逻辑共享，简化组件的开发和维护。

功能扩展：

当需要为多个组件添加某个特定的功能或行为时，可以通过Mixin将该功能封装成一个Mixin，并混入到需要的组件中。这样可以实现功能的扩展和定制，而不必修改原始组件的代码。

示例

// 定义一个Mixin
const myMixin = {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};

// 在组件中使用Mixin
Vue.component('my-component', {
  mixins: [myMixin],
  template: `
    <div>
      <button @click="increment">Increment</button>
      <p>Count: {{ count }}</p>
    </div>
  `
});