mixins
mixins 就是混入，用简单的话来说就是复制，作用是为了减少重复，并且一个混入对象可以包含任意组件选项。
Mixin.js
const Mixin = {
methods:{
hello(){
console.log('hello')
}
},
created(){
this.hello()
}
}
export default Mixin;
App.vue
<template>
<div id="app"></div>
</template>
<script>
import myMixin from "./Mixin.js";
export default {
mixins:[myMixin]
};
</script>
效果
ps：可以引用多个 mixins
选项合并
当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”，以组件数据优先
Mixin.js
const Mixin = {
data(){
return{
x :5,
y : 10
}
}
}
export default Mixin;
App.vue
<template>
<div id="app"></div>
</template>
<script>
import myMixin from "./Mixin.js";
export default {
mixins:[myMixin],
data(){
return{
x:10,
z:20
}
},
created(){
console.log(this.$data)
}
};
</script>
效果
在文件 Mixin.js 里 x=5，y=10，在文件 App.vue有x=10，z=20，在输出结果中我们可以看出，因为数据 x 同名，合并并以组件数据优先，因此输出结果为 x=10, z=20, y=10
作用
mixins 的作用是减少 data、methods、钩子的重复
extends
extends是继承，是比 mixins 更抽象一点的封装，两者有着同样的需求
Extends.js
const myExtends = {
methods: {
hello() {
console.log("hello");
}
},
created() {
this.hello();
},
}
export default myExtends;
App.vue
<template>
<div id="app"></div>
</template>
<script>
import myExtends from "./Extends.js";
export default {
extends:myExtends
};
</script>
效果
作用
如果需要多次重复 mixins，可以选择使用 extends
总结
mixins和extends需求类似，都是为了减少重复mixins会智能合并，以组件数据优先extends比mixins先执行mixins可以多个，extends只能一个
