mixin的基本用法

一、功能目的

• mixin目的：主要用于代码复用。它允许开发者将一组组件选项（如data、methods、computed、生命周期钩子等）提取出来，然后混入到多个组件中。这样可以避免在多个组件中重复编写相同的代码逻辑。
• 示例：假设存在多个组件都需要处理用户登录状态相关的逻辑，如显示登录状态图标、根据登录状态显示不同的菜单等。可以创建一个包含这些逻辑的mixin，然后混入到需要的组件中。

const userLoginMixin = {
  data() {
    return {
      isLoggedIn: false
    };
  },
  methods: {
    checkLoginStatus() {
      // 模拟检查登录状态的逻辑
      this.isLoggedIn = Math.random() > 0.5;
    }
  },
  computed: {
    loginMessage() {
      return this.isLoggedIn? '已登录' : '未登录';
    }
  }
};

• 然后在组件中使用这个mixin：

<template>
  <div>
    <p>{{loginMessage}}</p>
    <button @click="checkLoginStatus">检查登录状态</button>
  </div>
</template>
<script>
export default {
  mixins: [userLoginMixin]
};
</script>

二、在Vue项目中，mixin（混入）有以下几种常见用法：

1、代码复用

（1）基础复用示例

• 假设在多个组件中都需要一个显示加载状态的功能。可以创建一个mixin来包含相关的逻辑和数据。
• 首先创建loadingMixin.js文件：

export const loadingMixin = {
  data() {
    return {
      isLoading: false
    };
  },
  methods: {
    startLoading() {
      this.isLoading = true;
    },
    stopLoading() {
      this.isLoading = false;
    }
  }
};

• 然后在组件中使用这个mixin。例如在MyComponent.vue组件中：

<template>
  <div>
    <button @click="startLoading">开始加载</button>
    <button @click="stopLoading">停止加载</button>
    <p v - if="isLoading">正在加载...</p>
  </div>
</template>
<script>
import { loadingMixin } from './loadingMixin.js';
export default {
  mixins: [loadingMixin]
};
</script>

• 这样，loadingMixin中的数据和方法就被混入到MyComponent组件中，实现了代码的复用。

2、选项合并

（1）生命周期钩子合并

• 当一个mixin和组件都定义了相同的生命周期钩子时，它们会被合并调用。
• 例如，创建一个logMixin.js文件，其中包含mounted生命周期钩子：

export const logMixin = {
  mounted() {
    console.log('组件已挂载 - 来自mixin');
  }
};

• 在MyComponent.vue组件中也定义mounted生命周期钩子：

<template>
  <div>这是我的组件</div>
</template>
<script>
import { logMixin } from './logMixin.js';
export default {
  mixins: [logMixin],
  mounted() {
    console.log('组件已挂载 - 来自组件本身');
  },
  // 其他组件逻辑
};
</script>

• 当MyComponent组件挂载时，会先执行logMixin中的mounted钩子，再执行组件自身的mounted钩子。

（2）其他选项合并

• 除了生命周期钩子，像methods、computed等选项也可以合并。
• 例如，创建一个mathMixin.js文件：

export const mathMixin = {
  data() {
    return {
      num1: 5,
      num2: 3
    };
  },
  computed: {
    sum() {
      return this.num1 + this.num2;
    }
  },
  methods: {
    multiply() {
      return this.num1 * this.num2;
    }
  }
};

• 在MyComponent.vue组件中使用这个mixin：

<template>
  <div>
    <p>两数之和为: {{sum}}</p>
    <p>两数之积为: {{multiply()}}</p>
  </div>
</template>
<script>
import { mathMixin } from './mathMixin.js';
export default {
  mixins: [mathMixin],
  data() {
    return {
      num1: 10// 这里会覆盖mixin中的num1值
    };
  },
  computed: {
    sum() {
      return this.num1 * 2 + this.num2; // 这里会覆盖mixin中的sum计算属性
    }
  }
};
</script>

• 在选项合并时，如果组件和mixin中有相同的属性名，组件中的属性会覆盖mixin中的属性。

3、全局mixin

（1）创建全局mixin

• 在main.js（Vue项目的入口文件）中可以定义全局mixin。
• 例如，创建一个全局的日志mixin：

import Vue from 'vue';
Vue.mixin({
  mounted() {
    console.log('组件已挂载 - 全局mixin');
  }
});

• 这样，项目中的所有组件在挂载时都会执行这个全局mixin中的mounted钩子。不过要谨慎使用全局mixin，因为它会影响到所有组件，可能会导致一些难以排查的问题。