Vue 中mixin 的用法
定义
混入（mixin）提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项（如data、methods、mounted等等）。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。
个人理解： 就是有很多组件需要同一个方法。同一个变量。做同样的事。这个时候就用到这个混入的功能。混入之后变量组件内可用，方法也可用，写在周期函数的代码也会执行。
可以将混入理解为一个公共组件，这个公共组件可以融合到其他组件中。编写代码的时候。可以将组件中相同的部分抽象出来写成一个混入对象，减少代码重复。
使用方法
1. 写一个混入文件（mess.js）
//mess.js
export default {
data() {
return {
message: '我是混入中的变量'
};
},
mounted() {
console.log(this.message)
}
};
2. 导入混入
（1）局部混入
在需要的组件或者页面引入
<template>
<div class="top">
</div>
</template>
<script>
import mess from '@/mixin/mess'; // 直接引入
export default {
mixins: [mess], // 注册
components: {
},
data() {
return {
shopInfos: [],
isLoading: false
};
},
created() {
console.log(this.message); // 这里就可以使用混入对象里的变量
},
computed: {
},
methods: {
}
};
</script>
<style lang="scss" scoped>
</style>
（2）全局混入
在main.js加入以下代码
注意：全局混合被注册到了每个单一组件上。它们的使用场景及其有限要小心。
Vue.mixin({
data() {
return {
msg: 'hello'
}
},
methods: {
mixinMethod() {
console.log(this.msg+'，这是mixin混入的方法')
}
}
})
在组件中直接引用：
<template>
<div>{{msg}}</div>
</template>
<script>
export default {
data() {
return {
}
}
mounted() {
this.mixinMethod()
}
}
// hello，这是mixin混入的方法
</script>
混入规则
1.钩子函数
混入对象的钩子将在组件自身钩子之前调用。
// minxin.js
<script>
const mixin = {
data() {
return{
msg1: '我是混入内容1',
msg2: '我是混入内容2'
}
},
created() {
console.log(this.msg3)
}
}
export default mixin;
</script>
// 页面组件
<template>
<div class="header">
<h1></h1>
</div>
</template>mess
<script>
import mixin from '@/mixin/mixin'
export default {
mixins: [mixin],
name: 'Header',
data(){
return{
msg1: '我是组件内容1',
msg3: '我是组件内容2'
}
},
created() {
console.log(this.msg2)
console.log(this.msg1)
},
}
</script>
// 我是组件内容2
// 我是混入内容2
// 我是组件内容1
2.普通方法合并
当混合值为对象的选项时，例如 methods、components、directive，将被混合为同一个对象，两个对象键名冲突时，取组件对象的键值对。
<body>
<div id="app"></div>
</body>
<script src="./vue.js"></script>
<script>
var Mixins = {
methods: {
mixin: function() {
console.log('MixinOne')
},
mixinTwo: function () {
console.log('MixinTwo')
}
}
}
new Vue({
el: '#app',
mixins: [Mixins],
methods: {
mixin: function () {
console.log('component')
}
},
mounted() {
this.mixin()
this.mixinTwo()
}
})
// component
// MixinTwo
</script>
混入的规则总结
- 数据对象进行合并，其中的基本数据类型在和组件的数据发生冲突时以组件数据优先，组件中的数据会覆盖混入对象的数据。
- 数据对象中如果有引用数据类型，引用数据类型会进行深参差的递归合并。
- 生命周期钩子函数混合为一个数组，当使用组件时，组件的函数和混和的函数都执行，混入中的函数会先执行，组件的函数后执行。
- 值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。
总结
一般混入都是在单组件内应用比较合适
也可以进行全局注册。使用时格外小心！一旦使用全局混入，它将影响每一个之后创建的 Vue 实例。（不推荐全局引入）
实际用途包括
- keep-alive组件记录滚动条位置，回来时跳转到指定滚动位置。
- keep-alive组件销毁函数
- 提示框等等
混入在什么情景需要用到？
mixins的作用可能和vuex，公共组件这2有点像
mixins使用：
当我们存在多个组件中的数据或者功能很相近时，就可以使用mixins将公共部分提取出来，通过mixins封装的函数，组件调用他们是不会改变函数作用域外部的。
mixins和vuex的区别：
- vuex公共状态管理，在一个组件被引入后，如果该组件改变了vuex里面的数据状态，其他引入vuex数据的组件也会对应修改，所有的vue组件应用的都是同一个vuex数据。
- vue引入mixins数据，mixins数据或方法，在每一个组件中都是独立的，互不干扰的，都输入vue组件自身。
mixins和公共组件的区别:
- 通用的数据和方法，确实可以提出一个通用的组件，由父子组件传参的形式进行分享公用；公共组件最主要的作用还是复用相同的vue组件(有视图，有方法，有状态)
- 如果只是提取公用的数据或者方法，并且这些数据或者方法，不需要组件间进行维护，就可以使用mixins。(类似于js中封装的一些公用的方法)
