vue-Mixin(混入)
什么是mixin
官方解释：
混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。
民间解释：
将组件的公共逻辑或者配置提取出来，哪个组件需要用到时，直接将提取的这部分混入到组件内部即可。这样既可以减少代码冗余度，也可以让后期维护起来更加容易。
这里需要注意的是：提取的是逻辑或配置，而不是HTML代码和CSS代码。其实大家也可以换一种想法，mixin就是组件中的组件，Vue组件化让我们的代码复用性更高，那么组件与组件之间还有重复部分，我们使用Mixin在抽离一遍。
实战一下
新建 一个文件common/mixin/index.js
export const mixins = {
data() {
return {
msg:'hello mixin'
};
},
computed: {},
created() {
console.log('mixin的created')
},
mounted() {
console.log('mixin的mounted')
},
methods: {
clickMixin(){
console.log('我是mixin中的点击事件')
}
},
};
新建一个homeView.vue
<template>
<div class="home">
<div>home页面的数据{{msg}}</div>
<button @click="clickMixin">点击minxin中注册的方法</button>
</div>
</template>
<script>
import { mixins } from "@/common/mixin";
export default {
mixins:[mixins],
data(){
return {
}
},
created(){
console.log('组件的created')
},
mounted(){
console.log('组件的mounted')
},
methods:{
clickChange(){
this.msg = '11111111111'
}
}
}
</script>
// 页面打开后 打印顺序是
/*
* mixin的created
* 组件的created
* mixin的mounted
* 组件的mounted
* */
结论：mixin里面的属性组件可以用，对应的周期函数mixin里面的先执行，mixin里面的方法组件也可以用
那我要是其它页面也引入这个mixin ，并且修改msg，会出现什么情况呢，也就是说，这个组件修改msg，会不会影响其它组件用的msg
新建rulePage.vue并在app.vue引入
//rulePage.vue
<template>
<div>
<div>用户管理</div>
<div>其它页面的{{msg}}</div>
</div>
</template>
<script>
import {mixins} from "@/common/mixin";
export default {
mixins:[mixins],
}
</script>
//app.vue
<template>
<div id="app">
<nav>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</nav>
<rulePage></rulePage>
<router-view/>
</div>
</template>
<script>
import rulePage from './views/rulePage'
export default {
components:{
rulePage
},
data(){
return {
}
},
}
</script>
我们点击 homeView.vue修改本组件的msg 变成了 11111111111 并不会影响 rulePage.vue的 msg
结论：Mixin中的数据和方法都是独立的，组件之间使用后是互相不影响的
继续修改 rulePage.vue
<template>
<div>
<div>用户管理</div>
<div>其它页面的{{msg}}</div>
</div>
</template>
<script>
import {mixins} from "@/common/mixin";
export default {
mixins:[mixins],
data() {
return {
msg:'222222222'
}
},
}
</script>
发现这个组件的页面显示 222222222
结论：组件里面重复定义属性，会覆盖掉mixin里面的属性，同理方法也是
我们上面的都是在某个组件中混入的，那假某个方法或者属性，就是很多很多页面要用怎么更合理引入了？
全局混入
修改main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import { mixins } from './common/mixin/index'
// 全局引入
Vue.mixin(mixins);
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
这样 我们每个组件都可以用 msg 和 方法 clickMixin
虽然这样做很方便，但是我们不推荐，来看看官方的一段话：
请谨慎使用全局混入，因为它会影响每个单独创建的 Vue 实例 (包括第三方组件)。大多数情况下，只应当应用于自定义选项，就像上面示例一样。推荐将其作为插件发布，以避免重复应用混入。
扩展： 加入我有多个混入文件，我们组件怎么引入了 组件的mixins 是个数组可接受多个对象
mixins:[mixins1,mixins2]
// 先引入了mixins1 则它先执行 然后执行 mixins2
1.0 Mixin和Vuex的区别
- Vuex公共状态管理，如果在一个组件中更改了Vuex中的某个数据，那么其它所有引用了Vuex中该数据的组件也会跟着变化。
- Mixin中的数据和方法都是独立的，组件之间使用后是互相不影响的
2.0 与公共组件的区别
- 组件：在父组件中引入组件，相当于在父组件中给出一片独立的空间供子组件使用，然后根据props来传值，但本质上两者是相对独立的。
- Mixins：则是在引入Mixins之后，Mixins与组件中的属性和方法进行合并，相当于扩展了父组件的对象与方法，可以理解为形成了一个新的组件。
还有一个区别就是 生命中后期的执行顺序
混入执行顺序: mixin的created >> 组件的created >> mixin的mounted >> 组件的mounted
父组件与子组件执行顺序：父组件的created >> 子组件的created >> 子组件的mounted >> 父组件的mounted
3.0 mixin和mixins的区别
- mixin用于全局注册一个混入
Vue.mixin(mixins);
- mixins用于局部引入接受一个数组
