Vue面试之Mixins

最近在整理一些前端面试中经常被问到的问题，分为vue相关、react相关、js相关、react相关等等专题，可持续关注后续内容，会不断进行整理~

Mixins是Vue中一种用于代码复用的特性，通过Mixins，可以将一些通用的代码、逻辑、选项从一个组件提取出来，并将其应用到多个组件中；

定义Mixins

    Mixins是一个普通的javascript对象，可以包含组件中的任意选项：

// myMixins.js
export const myMixin = {
	data() {
		return {
			mixinData: 'Hello world!'
		};
	},
	methods: {
		mixinMethod() {
			console.log('这是mixins中的方法')
		}
	}
}

使用Mixins

    在组件中使用Mixins，可以通过mixins选项将其引入：

// MyComponent.vue
<template>
	<div>
		<p>{{mixinData}}</p>
		<button @click="mixinMethod">Click me</button>
	</div>
</template>

<script>
import { myMixin } from './myMixin.js'

export default {
	mixins: [myMixins],
	data() {
		return {
			// 组件自己的数据
		}
	}，
	methods: {
		// 组件自己的方法
	}
}
</script>

mixins 选项接受一个包含多个 Mixin 对象的数组，但也可以使用单个对象。这意味着你可以在 mixins 中以数组形式传递多个 Mixin，也可以以单个对象的形式传递一个 Mixin。下面是一个单个对象的示例：

// MyComponent.vue
import { mixin1 } from './mixin1';

export default {
  mixins: mixin1, // 对象形式
  data() {
    return {
      // 组件自己的数据
    };
  },
  methods: {
    // 组件自己的方法
  },
};

在上述示例中，‘mixins’选项只包含了一个对象mixin1，而不是数组。Vue会将单个对象的情况也当做数组来处理。

全局Mixins

    可以使用Vue.mixin全局方法来注册一个全局Mixin，它将影响所有组件。全局Mixin的使用应当谨慎，因为它可能导致命名冲突和不可预测的行为

// main.js
import Vue from 'vue';
import { globalMixins } from './globalMixins'

Vue.mixin(globalMixin); // 全局mixin

Mixins合并策略

    当多个Mixins和组件本身包含相同的选项时，Vue会采用一定的合并策略：

• 对于钩子函数来说，如生命周期函数等，会被合并为一个数组，并按照数组顺序依次调用；
• 对于数据对象data来说，会被递归合并，同名字段将被覆盖（一般来说，组件的数据选项将覆盖 Mixin 中的数据），但对象的深层结构会被合并；
• 对于方法来说，将会被合并为一个对象，同名方法将被覆盖

注意事项

命名冲突：

    避免在组件和 Mixin 中使用相同的命名，以免发生不可预测的冲突。

过度使用

    避免过度使用 Mixins，因为它可能导致代码难以理解和维护。Mixins 的适当使用场景是在多个组件中共享相同逻辑。

总的来说，Vue 中的 Mixins 是一种强大的工具，用于提高代码复用性和组件的可维护性。使用时需注意命名冲突和规避过度使用的情况。