mixin 混入 ​

mixin 是将组件中可共用的逻辑抽离出，以便在其它组件中能实现共用。不同组件中引入的同一个 mixin 是不会共用的。

优缺点 ​

• 优点
  • 复用逻辑
• 缺点
  • 变量来源不明确，不利于阅读
  • 多 mixin 可能会造成命名冲突
  • mixin 和组件可能出现多对多的关系，使得项目复杂度变高

分类 ​

mixin 可以注册到全局和组件两种方式，但业务中不建议注册为全局，因为注册到全局后，所有的组件都会被注入，包含使用到的三方组件。

• 全局混入：

// main.js
import mixin from './mixins'
Vue.mixin(mixin)

// main.js
import mixin from './mixins'
Vue.mixin(mixin)

• 组件混入：

import mixin from './mixins'
export default {
  mixins: [mixin]
}

import mixin from './mixins'
export default {
  mixins: [mixin]
}

合并与优先性 ​

mixin 与组件中的属性或方法会进行合并，如两者中都注册了 mounted 监听，将会把这两个的内容进行合并。当数据或方法同名时，组件内的优先级更高，会覆盖 mixin 的代码。