Mixin知识点
Mixin的合并规则
目前我们是使用组件化的方式在开发整个Vue的应用程序，但是组件和组件之间有时候会存在相同的代码逻辑，我们希望对相同的代码逻辑进行抽取。
在Vue2和Vue3中都支持的一种方式就是使用Mixin来完成：
- Mixin提供了一种非常灵活的方式，来分发Vue组件中的可复用功能；
- 一个Mixin对象可以包含任何组件选项；
- 当组件使用Mixin对象时，所有Mixin对象的选项将被 混合 进入该组件本身的选项中；
如果Mixin对象中的选项和组件对象中的选项发生了冲突，那么Vue会如何操作呢？ 这里分成不同的情况来进行处理；
情况一：如果是data函数的返回值对象 返回值对象默认情况下会进行合并； 如果data返回值对象的属性发生了冲突，那么会保留组件自身的数据；
情况二：如何生命周期钩子函数 生命周期的钩子函数会被合并到数组中，都会被调用；
情况三：值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。比如都有methods选项，并且都定义了方法，那么它们都会生效；但是如果对象的key相同，那么会取组件对象的键值对；
全局混入Mixin
如果组件中的某些选项，是所有的组件都需要拥有的，那么这个时候我们可以使用全局的mixin：
- 全局的Mixin可以使用 应用app的方法 mixin 来完成注册；
- 一旦注册，那么全局混入的选项将会影响每一个组件；
// 局部
<script>
import { demoMixin } from './mixins/demoMixin';
export default {
mixins: [demoMixin],
data() {
return {
title: "hello world",
}
}
}
</script>
// 全局
const app = createApp(App);
app.mixin({
data() {
return {}
},
methods: {
},
created() {
console.log("全局的created声明周期");
}
})
app.mount("#app");
extends
另外一个类似于Mixin的方式是通过extends属性：
- 允许声明扩展另外一个组件，类似于Mixins；
- 在开发中extends用的非常少，在Vue2中比较推荐大家使用Mixin，而在Vue3中推荐使用Composition API。
//BasePageVue组件:
<template>
<div>
</div>
</template>
<script>
export default {
data () {
return {
title: "Hello Page"
}
},
methods: {
bar() {
console.log("base page bar");
}
}
}
</script>
//Home组件
<template>
<div>
Home Page
<h2>{{title}}</h2>
<h2>{{content}}</h2>
<button @click="bar">点击</button>
</div>
</template>
<script>
import BasePageVue from './BasePage.vue';
export default {
extends: [BasePageVue],
data() {
return {
content: "Hello Home"
}
}
}
</script>
