vue3之Mixin混入

Mixin

分发 Vue 组件中的可复用功能

• 不同组件使用mixin，mixin里的数据是独立的，组件间不会受影响（A组件使用mixin中的num属性，B组件也是用num属性，A组件修改num的值不会影响B组件引入mixin的num值）
• 数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。
• app.config.optionMergeStrategies：自定义选项合并策略，会影响混入数据和组件内数据显示的优先级。
  以下设置，则会使混入数据的优先级高于组件内数据的优先级（针对设置的propeety）

app.config.optionMergeStrategies[property] = (toVal, fromVal) => toVal || fromVal

setup写法

mixin.js

import {ref} from 'vue'
export default function(){
  let  num = ref(1);
  let fav = ref(false);
  let favBtn = ()=>{
		num.value += 1;
		fav.value = true;
		setTimeout(()=>{
			fav.value = false;
			  },2000)
		}
		return {num,fav,favBtn}

}

A.vue

<template>
	<div>
		<h1>A组件</h1>
		{{ num }}
		<button @click='favBtn'>
			{{ fav ? '收藏中...' : '收藏' }}
		</button>
	</div>
</template>

<script setup>
import mixin from '../mixins/mixin.js'
let { num , fav , favBtn } = mixin();
</script>

选项式api写法（vue2写法）

mixin.js

export const fav = {
	data () {
		return {
			num:10
		}
	},
	methods:{
		favBtn( params ){
			this.num += params;
		}
	}
}

A.vue

<template>
	<div>
		<h1>A组件</h1>
		{{ num }}
		<button @click='favBtn(1)'>按钮</button>
	</div>
</templat>
<script type="text/javascript">
import { fav } from '../mixins/mixin.js'
export default{
	data () {
		return {
			str:'你好'
		}
	},
	mixins:[fav]
}
</script>