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

<template>
    <div id="app">
      <h1>{{ myMiXinText}}</h1>
    </div>
</template>

<script>
import { myMixins } from './mixin/myMixin'
export default {
  data() {
    return {
    }
  },
  mixins: [myMixins]
}
</script>

myMixin.js

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

局部混入效果

全局混入

APP.vue

<template>
    <div id="app">
      <h1>{{ myMiXinText}}</h1>
    </div>
</template>

main.js

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

全局混入效果

混入与组件的加载顺序

组件：

<template>
    <div id="app"></div>
</template>

<script>
import { myMixins } from './mixin/myMixin'
export default {
  data() {
    return {
    }
  },
  mixins: [myMixins],
  mounted() {
    console.log('我是组件的mounted')
  },
  created() {
    console.log('我是组件的created')
  }
}
</script>

混入：

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

image.png

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

混入与组件的命名冲突

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

<template>
    <div id="app">
      <h1>{{myMiXinText}}</h1>
      <button @click="myBtn">点击</button>
    </div>
</template>

<script>
import { myMixins } from './mixin/myMixin'
export default {
  data() {
    return {
      myMiXinText:'我是组件data的字段'
    }
  },
  methods: {
      myBtn() {
        console.log('组件中的点击')
      }
  },
  mixins: [myMixins]
}
</script>

mixin混入:

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

image.png

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

组件A

<template>
    <div id="app">
      <div>我是组件A---mixin中的数据：{{myMiXinText}}</div>
      <hr/>
      <!-- 组件B -->
      <homePage></homePage>
      <hr/>
      <button @click="handleChange">更改mixin数据</button>
    </div>
</template>

<script>
import { myMixins } from './mixin/myMixin'
import homePage from './components/homePage.vue'

export default {
  data() {
    return {
    }
  },
  components: {
    homePage
  },
  mixins: [myMixins],
  methods: {
    handleChange() {
      this.myMiXinText = '修改组件A'
      console.log('"更改后的值', this.myMiXinText)
    }
  }
}
</script>

组件B

<template>
    <div id="homePage">
        我是组件B---mixin中的数据：{{ myMiXinText }}
    </div>
</template>

<script>
import { myMixins } from '../mixin/myMixin'
export default {
  data() {
    return {}
  },
  mixins: [myMixins]
}
</script>

myMixin.js：

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

image.png
效果

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

混入的优缺点

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

总结

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