8.Vue 对mixin的理解

1.什么时mixin

Mixin是面向对象程序设计中的类，提供了方法的实现，其他类可以访问mixin的方法而不必成为其子类

2.使用方式

2.1 局部混入

//局部混入
<template>
  <div>

  </div>
</template>

<script>
import { MyMixin } from '../mixin/index'
export default {
  mixins: [MyMixin], // 不要加引号
  created () {
    this.say()
  },
  methods: {
    say () {
      console.log('你好世界')
    }
  }
}
</script>

//定义
export const MyMixin = {
  created () {
    this.hello()
  },
  methods: {
    hello () {
      console.log('你好我叫aDong')
    }
  }
}

该组件在使用mixin的时候，若mixin中有生命周期函数，则会先执行mixin中生命周期钩子，后执行组件的生命周期钩子。

2.2 全局混入

//main.js
...
import { MyMixin } from './mixin/index'
Vue.mixin(MyMixin)
...

谨慎使用全局混入，它会影响每个单独创建的 Vue 实例 (包括第三方组件)，避免重复应用混入

3.mixin 与 extends 的覆盖逻辑