Vue3 混入

关键要点

• 混入 (mixins) 是 Vue3 中分发组件可复用功能的机制，适合提取公共逻辑。
• 混入支持局部和全局注册，选项如数据和方法会合并，组件优先级高于混入。
• 官方推荐使用组合式 API (Composables) 替代混入，避免“混入地狱”问题。

什么是混入？

混入允许将多个组件共享的逻辑（如方法、计算属性）提取到一个对象中，减少代码重复。组件使用混入时，混入的选项会合并到组件选项中，适合需要复用功能的场景。

如何使用？

• 局部混入：在组件中通过 mixins 数组使用，例如：

  const myMixin = { methods: { hello() { console.log('Hello') } } }
  const app = Vue.createApp({ mixins: [myMixin] })
  

• 全局混入：通过 app.mixin() 注册，影响所有组件，但需谨慎使用。

合并规则

• 数据对象递归合并，组件数据优先。
• 钩子函数按顺序调用，混入钩子先于组件钩子。
• 方法等对象选项合并，组件选项覆盖混入选项。

详细报告

Vue3 混入 (mixins) 是一种分发组件可复用功能的机制，允许开发者将公共逻辑提取到一个对象中，并在多个组件中共享。这种方式在 Vue2 中非常常见，但在 Vue3 中，虽然仍被支持，官方更推荐使用组合式 API (Composables) 来实现代码复用，以避免“混入地狱”问题。以下是关于 Vue3 混入的全面讲解，涵盖定义、使用方式、合并规则和注意事项。

背景与定义

混入提供了一种灵活的方式来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项（如 data、methods、computed、created 等）。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。这种机制适合用于提取多个组件共享的逻辑，例如相同的初始化逻辑或方法。

在 Vue3 中，混入的实现与 Vue2 基本一致，但由于组合式 API 的引入，开发者更倾向于使用可组合函数 (Composables) 来实现代码复用，因为它提供了更好的类型推导和代码组织能力。然而，混入在某些场景下仍有用武之地，尤其是在需要兼容 Vue2 代码或处理简单复用逻辑时。

使用方式

混入可以通过两种方式注册：

• 局部混入：在组件的选项中直接指定 mixins 数组。例如：

  // 定义混入对象
  const myMixin = {
    created() {
      this.hello()
    },
    methods: {
      hello() {
        console.log('欢迎来到混入实例-RUNOOB!')
      }
    }
  }
  
  // 在组件中使用混入
  const app = Vue.createApp({
    mixins: [myMixin]
  })
  app.mount('#app')
  // => "欢迎来到混入实例-RUNOOB!"
  

  这种方式只影响当前组件，适合特定场景下的复用逻辑。

• 全局混入：通过 app.mixin() 方法在应用级别注册，影响所有组件。例如：

  // 在 main.js 中注册全局混入
  const app = Vue.createApp({})
  app.mixin({
    mounted() {
      console.log('全局混入的 mounted 钩子被调用')
    }
  })
  

  全局混入会影响所有组件，因此使用时需格外小心，建议仅在需要为所有组件注入特定逻辑时使用。

选项合并规则

当组件使用混入时，混入对象的选项会与组件自身的选项合并。合并规则如下：

• 数据对象 (data)：进行递归合并，组件的数据优先级高于混入的数据。例如：

  • 混入对象：{ data: { firstName: 'hello', lastName: 'world' } }
  • 组件对象：{ data: { firstName: 'dsdsdd' } }
  • 合并结果：{ firstName: 'dsdsdd', lastName: 'world' }
  • 合并深度为 1 层，嵌套对象不会递归合并。

• 钩子函数 (如 created、mounted)：合并为一个数组，混入的钩子函数在组件的钩子函数之前调用。例如：

  • 混入对象：{ created() { console.log('混入对象的钩子被调用') } }
  • 组件对象：{ created() { console.log('组件钩子被调用') } }
  • 执行顺序：先输出“混入对象的钩子被调用”，再输出“组件钩子被调用”。

• 对象值选项 (如 methods、components、directives)：合并为同一个对象，组件的选项优先级高于混入的选项。例如：

  • 混入对象：{ methods: { foo() { console.log('from mixin') }, conflicting() { console.log('from mixin') } } }
  • 组件对象：{ methods: { bar() { console.log('from self') }, conflicting() { console.log('from self') } } }
  • 合并结果：{ foo: [mixin function], bar: [component function], conflicting: [component function] }，调用 conflicting() 时，输出“from self”。

以下表格总结了选项合并规则：

使用场景与实践

混入适合以下场景：

• 当多个组件共享相同的逻辑（如方法、计算属性等），但组件的样式或其他部分不同时。例如，Modal 和 Tooltip 组件可能都需要一个 toggleShow 方法来切换显示状态，但它们的外观和使用方式不同。此时，可以将 toggleShow 方法提取到一个混入对象中：

  // 定义混入对象
  const toggleMixin = {
    data() {
      return {
        isShowing: false
    }
    },
    methods: {
      toggleShow() {
        this.isShowing = !this.isShowing
      }
    }
  }
  
  // 在组件中使用
  const Modal = {
    mixins: [toggleMixin],
    template: '<div>Modal</div>'
  }
  
  const Tooltip = {
    mixins: [toggleMixin],
    template: '<div>Tooltip</div>'
  }
  

• 在 Vue-CLI 项目中，推荐将混入对象放在 src/mixins 文件夹下，例如 src/mixins/toggle.js，然后在组件中导入使用：

  import { toggleMixin } from '../mixins/toggle.js'
  export default {
    mixins: [toggleMixin]
  }
  

注意事项

• 全局混入的潜在问题：全局混入会影响所有组件，可能会导致代码难以维护。例如，如果多个全局混入都定义了相同的钩子函数，执行顺序可能会变得复杂。因此，建议仅在需要为所有组件注入特定逻辑（如日志记录）时使用。
• 数据冲突：由于数据合并是浅层递归，嵌套对象可能导致意外覆盖，需注意数据结构的定义。
• “混入地狱”问题：过度使用混入可能导致代码难以追踪和维护，尤其是在多个混入之间存在复杂依赖时。在 Vue3 中，官方推荐使用组合式 API 来替代混入。例如：

  // 组合式 API 实现
  function useToggle() {
    const isShowing = ref(false)
    const toggleShow = () => {
      isShowing.value = !isShowing.value
    }
    return { isShowing, toggleShow }
  }
  
  // 在组件中使用
  import { useToggle } from './composables/toggle'
  export default {
    setup() {
      const { isShowing, toggleShow } = useToggle()
      return { isShowing, toggleShow }
    }
  }
  

  组合式 API 提供了更好的类型推导和代码组织能力，适合复杂场景。

Vue3 中的变化

在 Vue3 中，混入的实现与 Vue2 基本一致，但由于 Composition API 的引入，官方文档更强调可组合函数 (Composables) 的使用。官方文档中关于混入的部分较少，但仍支持 Options API 中的 mixins 选项。因此，开发者在 Vue3 项目中应优先考虑组合式 API，除非需要兼容 Vue2 代码或处理简单复用逻辑。

总结

Vue3 混入是一种强大的代码复用机制，适合提取公共逻辑并在多个组件中共享。选项合并规则明确，数据和方法会按优先级合并，钩子函数按顺序调用。但需注意全局混入的潜在问题，并避免“混入地狱”。在 Vue3 中，官方推荐使用组合式 API 来实现更灵活的代码复用。

关键引文

• Vue3 混入详细讲解
• Vue 之 Mixins（混入）详解
• Vue 3 mixins 混入实践