mixin 与 vuex 的区别

mixin 与 vuex 的区别

答：

mixin 混入对象和 Vuex 的区别：

• Vuex 是状态共享管理，所以 Vuex 中的所有变量和方法都是可以读取和更改并相互影响的；它是一个独立的状态管理库，所有组件共用一份 store。
• mixin 可以定义公用的变量或方法，但是 mixin 中的数据是不共享的，也就是每个组件中的 mixin 实例都是独立的，都是单独存在的个体，不存在相互影响；mixin 更像是组件级别的逻辑复用。

mixin 的合并策略

• 同名函数选项：会进行递归合并为数组，两个函数都会执行，先执行 mixin 中的同名函数，再执行组件自身的同名函数。
• 同名对象选项：将会进行替换，组件内的同名对象会覆盖 mixin 中的同名对象。

// mixin.js
export default {
  data() {
    return { msg: 'from mixin' }
  },
  created() {
    console.log('mixin created')
  }
}

// 组件
import mixin from './mixin'

export default {
  mixins: [mixin],
  data() {
    return { msg: 'from component' } // 覆盖 mixin 中的 msg
  },
  created() {
    console.log('component created') // 先 mixin，后 component
  }
}

来源整理自：vue3js.cn 面试官系列