vue2和vue3中mixins的使用

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

vue文档——mixin混入

Vue2.x 中mixin的使用

// mixin.js
export default{
	data(){
		return{
		}
	},
	created() {
    	// do something...
  	},
	methods:{...}
}

// vue页面中引入
import mixin from 'mixin.js'
export default{
	data(){},
	mixins: [mixin]
}

在mixin定义的方法和值可以在所有引入 mixin.js 的vue页面中调用。

例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。

Vue3中mixin的使用

// mixin.js
import { computed, ref } from 'vue'
export default function () {
	setup(){
		const count = ref(1)
		const plusOne = computed(() => count.value + 1)
		function hello(){
			console.log('hello mixin'+plusOne.value)
		}
		return{
			count,
			plusOne,
			hello
		}
	}
}

// vue页面中引入
import mixin from 'mixin.js'
export default{
	setup(){
		const { count, plusOne, hello } = mixin()
		hello()
		console.log(count.value, plusOne.value)
	}
}

// 调用组件中的局部变量
export default {
  setup () {
    // 某个局部值的合成函数需要用到
    const myLocalVal = ref(0);

    // 它必须作为参数显式地传递
    const { ... } = mixin(myLocalVal);
  }
}

mixin模式表面上看起来很安全。然而，通过合并对象来共享代码，由于它给代码增加了脆弱性，并且掩盖了推理功能的能力，因此成为一种反模式。
Composition API最聪明的部分是，它允许Vue依靠原生JavaScript中内置的保障措施来共享代码，比如将变量传递给函数和模块系统。

参考链接：https://www.imooc.com/article/303667