Mixin

Mixin

混合器 用于将vue组件中的options进行抽离

const baseMixin = {
  data () {
    return {
      apiUrl: 'http://www.baidu.com'
    }
  },
  created(){
  	console.log('mixin 的created')
  }
}
export default {
  mixins: [baseMixin]
}

抽离成独立的js文件后在组件import引入

Mixin的选项合并

当组件和混入对象有同名属性时，这些选项将以恰当的方式进行合并

如果混合器混入的内容也有生命周期函数 那么组件内的生命周期函数会一起执行 且混入器的先执行

数据对象会在内部进行递归合并，并在发生冲突时以组件的数据优先(无论mixin的导入顺序)

全局配置Mixin

为Vue应用程序全局应用mixin

import { createApp } from 'vue'
import App from './App.vue'
import baseMixin from './baseMixin'

const app = createApp(App)
app.mixin(baseMixin)
app.mount('#app')

或

 Vue.mixin({
    created(){
      console.log('我是全局的生命周期')
    }
  })

通过main.js全局挂载mixin

在所有组件中默认拥有挂载的mixin的所有options( 每个组件不需引入及配置 )

注：

全局配置的Mixin如果有生命周期函数

会比组件内的Mixin的生命周期函数 和 组件内的生命周期函数优先级更高

组件内的Mixin的生命周期函数 比 组件内的生命周期函数优先级更高