15.Composition API(一)

补充:认识Mixin
组件和组件之间会存在相同的代码逻辑,将相同的代码逻辑进行抽取,使用Mixin来完成。

分发组件中的可复用功能，一个Mixin对象可以包含任何组件选项；当组件使用Mixin对象时，所有Mixin对象的选项将被混合进入该组件本身的选项中。

在 Vue 2 中，mixins 是创建可重用组件逻辑的主要方式。尽管在 Vue 3 中保留了 mixins 支持，但对于组件间的逻辑复用，Composition API 是现在更推荐的方式。

// 混入对象
export const demoMixin ={
	data(){
		return{
			message:"hello DemoMixin"
		}
	},
	methods:{
		foo(){
			console.log("demoMixin's foo")
		}
	},
	created(){
		console.log("执行了demoMixin里面的created周期")
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

在App.vue中导入：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

Mixin的合并规则
（1）data函数返回值对象属性发生了冲突，那么会保留组件自身的数据；
（2）生命周期的钩子函数会合并在数组中，都会被调用&#