本文已参与[新人创作礼]活动，一起开启掘金创作之路

一.区别

1.mixin与Vuex

(1)Vuex

Vuex其实可以想象成一个内存中的对象，其中数据可以理解为是保存在内存中的全局变量，所以Vuex中的所有变量和方法都是可以读取和更改并相互影响的。

(2)mixin

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

mixin混入对象值为函数的同名函数选项将会进行递归合并为[数组]，两个函数都会执行，只不过先执行mixin中的同名函数

mixin混入对象值为对象的同名对象将会进行替换，都优先执行组件内的同名对象，也就是组件内的同名对象将mixin混入对象的同名对象进行了覆盖

2.mixin与公共组件

(1)公共组件

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

(2)mixin

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

二.用法

main.js

import mixin from '@/mixin'
Vue.mixin(mixin)

mixin/index.js

export default {
  // 组件暴露出来的都可以在这里写
  data() {
    return {
      msg: 'hello  mixin',
    }
  },
    methods: {
    mm() {
      console.log('mixin666')
    }
   }
}

.vue

   <p>  {{ msg }}</p>
   ...
  created() {
    this.mm()
  },

同名时

.vue

  data() {
    return {
      msg: 'noMixin'
    }
  },
  methods: {
    mm() {
      console.log('111')
    }
  },

效果

mixin混入后被原组件同名数据覆盖了