mixins

混入 (mixins)： 是分发 Vue 组件中可复用功能的一种方式。mixins混入对象可以包含组件的任意选项。当组件使用mixins混入对象时，所有混入对象的选项将被混入该组件本身的选项。

使用：新建mixins文件夹，再新建info.js

//mixins->info.js
export default {
  data () {
    return {
      num: 1
    }
  },
  methods: {
    desc () {
      console.log("desc from mixins")
    }
  },
  mounted () {
    console.log("hello from mixins")
  }
}

　　

//Hello.vue
<template>
  <div class="hello">
    <button @click="add">Hello2</button>{{num}}
  </div>
</template>

<script>
import info from '@/mixins/info'
export default {
  name: 'Hello',
  mixins: [info],
  methods: {
    add () {
      this.num++
    },
  },

  mounted: {
    this.desc()
  },

} </script>

mixins的特点：

1、方法和参数在组件中不共享

例：在组件1和组件2中都引入混入对象，在组件1中改变混入对象中的num值，组件2中的num值不会发生变化

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

例：若组件中的methods里面的方法和混入对象中的methods里的方法相同，则组件中的会覆盖混入对象中相同的方法，不相同的方法会合并在组件的methods中

3、如created、mounted等值为函数的选项，会被合并调用，混合对象中的钩子函数在组件中的钩子函数之前调用

与vuex的区别

vuex：用来做状态管理的，里面定义的变量在每个组件中均可以使用和修改，在任一组件中修改此变量的值之后，其他组件中此变量的值也会随之修改。

Mixins：可以定义共用的变量，在每个组件中使用，引入组件中之后，各个变量是相互独立的，值的修改在组件之间不会相互影响。

与公共组件的区别

组件：在父组件中引入组件，相当于在父组件中给出一片独立的空间供子组件使用，然后根据props来传值，但本质上两者是相对独立的。

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