vue Mixin混入

什么是混入

官方：

官方

大白话：
将组件的公共逻辑或者配置提取出来，哪个组件需要用到时，直接将提取的这部分混入到组件内部。

Mixin和vuex的区别

Vuex公共状态管理，如果在一个组件中更改了Vuex中的某个数据，那么其它所有引用了Vuex中该数据的组件也会跟着变化。
Mixin中的数据和方法都是独立的，组件之间使用后是互相不影响的。

定义混入

在src下新建mixin文件夹(文件夹名自取)，再新建一个文件.js(文件名自取)

export const mixins = {
  data() {
    return {};
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {},
}

// 或者
export default {
  data() {
    return {};
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {},
}
// 带default引入default  import myMixins from './mixin/myMixin'

混入导出的其实就是一个对象

局部混入

在组件中局部混入使用的是：mixins:['']

APP.vue

myMixin.js

export const myMixins = {
    data() {
      return {
        myMiXinText: '我是局部混入'
      }
    }
}

局部混入效果

全局混入

APP.vue

main.js

import { myMixins } from "./mixin/myMixin"
Vue.mixin(myMixins)

全局混入效果

混入与组件的加载顺序

组件：

混入：

export const myMixins = {
    data() {
      return {}
    },
    mounted() {
        console.log('我是混入的mounted')
    },
    created() {
        console.log('我是混入的created')
    }
}

image.png

生命周期函数合并后执行顺序：先执行mixin中的，后执行组件的。

混入与组件的命名冲突

组件定义的data字段和方法要高于mixin混入的
组件:

mixin混入:

export const myMixins = {
    data() {
      return {
        myMiXinText: '我是混入字段'
      }
    },
    methods: {
        myBtn() {
            console.log('混入中的点击')
        }
    }
}

image.png

组件改动了mixin中的数据，另一个引用了mixin的组件会受影响吗？

组件A

组件B

myMixin.js：

export const myMixins = {
    data() {
      return {
        myMiXinText: '我是哈哈'
      }
    }
}

image.png

效果

Mixin中的数据和方法都是独立的，组件之间互相不影响

混入的优缺点

优点:
提高代码复用性
无需传递状态
维护方便，只需要修改一个地方即可
缺点:
命名冲突
滥用的话后期很难维护
不好追溯源，排查问题稍显麻烦
不能轻易的重复代码

总结

1、mixin中的生命周期函数会和组件的生命周期函数一起合并执行,合并后执行顺序：先执行mixin中的，后执行组件的
2、mixin中的data数据在组件中也可以使用
3、mixin中的方法在组件内部可以直接调用
4、Mixin中的数据和方法都是独立的，组件之间互相不影响
5、组件定义的data字段和方法要高于mixin混入的