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>
