什么是混入
官方：
官方
大白话：
将组件的公共逻辑或者配置提取出来，哪个组件需要用到时，直接将提取的这部分混入到组件内部。
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混入的
