Vue 2.0 混入（Mixins）的学习与了解
概念： 混入（mixins）是一种分发vue组件中可复用功能的非常灵活的方式
混入的对象可以包含任意的组件选项
当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项
理解：mixins 是一个JavaScript对象，可以包含组件中的任意选项， 比如Vue 实例中生命周期的各个钩子函数， 也可以是data, components, methods 或 directives等。 在Vue中，mixins 为我们提供了Vue组件中共用功能的方法。在使用时，将共用功能以对象的方式传入mixins 选项中。当组件使用mixins 对象时，所有mixins对象的选项都将被混入该组件本身的选项。
选项合并：当组件和混入对象含有同名选项时，这些选项将以恰当的方式混合
1. 数据 data 合并：
//---- 新建mix.js 文件
export const mixOne = {
data() {
return {
msg1: '这是mixOne1的数据',
msg2: '这是mixOne2的数据',
msg3: '这是mixOne3的数据'
}
}
}
export const mixTwo = {
data() {
return {
msg1: '这是mixTwo1的数据',
msg2: '这是mixTwo2的数据',
msg3: '这是mixTwo3的数据'
}
}
}
// 使用时引入mix 文件
import {mixOne, mixTwo} from './mix'; // 导入混合对象
export default {
mixins:[mixOne, mixTwo], // 记得一定要添加 mixins 属性，要求赋值一个数组，意味着可以使用多个混合对象
data() {
return {
msg1: '这是hello.vue的msg数据',
hello: '这是hello.vue的hello数据'
}
},
created() {
console.log( this.$data.msg1);
console.log( this.$data.msg2);
console.log( this.$data.msg3);
console.log( this.$data.hello);
}
}
输出结果：这是hello.vue的msg数据
这是mixTwo2的数据
这是mixTwo3的数据
这是hello.vue的hello数据结论：1. 数据对象在内部分进行浅合并（一层属性深度），在和组件的数据发生冲突时， 以组件数据优先;
2. 如果 mixins 中的数据与组件中的数据冲突时（例如: msg1）, 以组件数据为优先
3. 如果 mixins 中的数据与组件中的数据不冲突，但是与另外的mixins的对象的数据冲
突时(例如：msg2）,则根据 引入 mixins的对象的顺序，决定以后加载的为优先；
4. 如果mixins 中的数据都不存在冲突，则都会合并到组件数据中。
2. 钩子函数的合并
export const mixOne = {
created(){
console.log("heyn: 这是mixOne的create ");
}
}
export const mixTwo = {
created(){
console.log("heyn: 这是mixTwo的create ");
}
}
import {mixOne, mixTwo} from './mix';
export default {
mixins:[mixOne, mixTwo],
created() {
console.log("heyn：这是hello.vue 的create");
}
}
输出结果：
heyn: 这是mixOne的create
heyn: 这是mixTwo的create
heyn：这是hello.vue 的create
结论：1. 同名钩子函数将混合为一个数组，因此都将被调用
2. 混入对象（mixins对象）的钩子将在组件自身钩子之前调用
3. 混入对象如果有多个，并且每个都包含同名的钩子函数，则调用顺序依照混入对象的引入顺序执行
3. 值为对象选项合并
export const mixOne = {
methods:{
test(){
console.log("heyn: 这是mixOne的 test");
}，
test2(){
console.log("heyn: 这是mixOne的 test2");
}
}
}
import {mixOne} from './mix';
export default {
mixins:[mixOne],
created() {
this.test();
this.test2();
}
methods: {
test(){
console.log("heyn: 这是hello的 test");
},
}
}
输出结果：
heyn: 这是hello的 test
heyn: 这是mixOne的 test2结论：1. 值为对象的选项，例如 methods, components 和 directives，将被混合为同一个对象
2. 两个对象键名冲突时，取组件对象的键值对