mixin使用场景：

当我们的Vue项目模块越来越多，项目越来越复杂，太多相似之处又有略微的不同，使用之前常用的自定义组件，通过props传递状态作为区分，太多的变量及参数，会造成代码不易读，其他开发者要结合上下文添加参数等。

所以这时可以使用mixin可以把相同之处的代码整合到一起，在组件中作为变量引用，达到复用效果。

类似于于封装组件,再把代码导入到组件的意思，类似于jq的$.extend。

当组件方法/变量与mixin发生冲突时：

组件会覆盖mixin，以组件为主。（优先执行mixin,再执行组件，组件数据会覆盖掉mixin）

示例（更好理解）

当组件和mixin同时定义生命周期选项,两个都会触发,而且mixin会先触发.

<script>
    // 定义一个mixin
    const myMixin = {
        mounted() {
            console.log('minxin的mounted');
        }
    }
    // 定义一个Vue
    const app = new Vue({
        el: '#app',
        //mixins节点表示引入混入,接收一个数组,可以是多个mixin
        mixins: [myMixin],
        mounted() {
            console.log('组件的mounted');
        }
    })
</script>

// => "minxin的mounted"
// => "组件的mounted"

数组可以接收多个mixin当组件选项与混入选项冲突时以组件优先

<body>
    <div id="app">{{name}}</div>
    <script>
        // 定义一个mixin
        const myMixin = {
            data() {
                return {
                    name: '苹果'
                }
            }
        }
        // 定义一个Vue
        const app = new Vue({
            el: '#app',
            //mixins节点表示引入混入,接收一个数组,可以是多个mixin
            mixins: [myMixin],
            data() {
                return {
                    name: '橘子'
                }
            }
        })
    </script>
</body>
// retrun "橘子"

Mixin 对象可以使用任何组件选项如 data、mounted、created、update等

// mixin.js file
export default {
   data () {
      msg: ‘Hello World’
   },
   created: function () {
      console.log('这里由 mixin 中 create 方法打印！')
   },
   methods: {
      displayMessage: function () {
         console.log(‘这里由 mixin 方法里打印！’)
      }
   }
}
// -----------------------------------------------------------
// main.js file
import mixin from ‘./mixin.js’
new Vue({
   mixins: [mixin],
   created: function () {
      console.log(this.$data)
      this.displayMessage()
   }
})
// => "这里由 mixin 中 create 方法打印！"
// => {msg: ‘Hello World’}
// => "这里由 mixin 方法里打印！"

优点：

复用代码
更灵活拓展代码

缺点：

命名冲突
变量会被覆盖
~~修改mixin会造成全局变量污染~~

注意：

vue3.0中已经将mixin作为备选方案,优先选择使用hook,也是复用的.因为mixin覆盖性会导致不稳定性.类似全局变量,如果mixin被修改,会造成全局污染.所以使用的时候需要小心

深入理解Vue中的mixins

mixin使用场景：

当组件方法/变量与mixin发生冲突时：

示例（更好理解）