前端Vue篇之什么是 mixin ？mixin 和 mixins 区别

在Vue.js中，mixin是一种非常强大的特性，它允许开发者将可重用的功能抽象出来并共享到多个组件中。使用mixins可以让代码更具可读性和可维护性，同时避免重复代码。

什么是 Mixin

Mixin 是一种代码复用机制，可以把一些可复用的功能定义在一个对象中，然后再把这个对象引入到 Vue 组件中。它通常包含了组件的生命周期钩子、数据、方法、计算属性等，它们将被应用到组件中，使得组件可以继承这些功能。

示例

下面是一个简单的 mixin 的例子：

// 定义一个 mixin
const myMixin = {
  data() {
    return {
      mixinData: 'This is mixin data'
    }
  },
  created() {
    console.log('Mixin created hook called');
  },
  methods: {
    mixinMethod() {
      console.log('This is a method from mixin');
    }
  }
}

// 使用 mixin 的组件
const MyComponent = {
  mixins: [myMixin],
  data() {
    return {
      componentData: 'This is component data'
    }
  },
  created() {
    console.log('Component created hook called');
  },
  methods: {
    componentMethod() {
      console.log('This is a method from component');
    }
  },
  template: `<div>
               <div>{{ mixinData }}</div>
               <div>{{ componentData }}</div>
               <button @click="mixinMethod">Call Mixin Method</button>
               <button @click="componentMethod">Call Component Method</button>
             </div>`
}

在这个例子中，我们定义了一个 myMixin 对象，这个对象中包含了一个数据属性、一个生命周期钩子和一个方法。然后在 MyComponent 中引入了这个 mixin，这样就可以直接使用 mixinData、mixinMethod 以及 created 钩子中定义的功能。

当我们创建 MyComponent 时，控制台将会依次输出：

Mixin created hook called
Component created hook called

这表明 mixin 的 created 钩子在组件的 created 钩子之前被调用。

mixin 和 mixins 的区别

在 Vue 中，mixin 和 mixins 通常被认为是一个概念，但在使用时有一些细微的区别：

• mixin：是一个单独的 mixin 对象，我们可以自定义的实现功能。我们可以将多个功能封装在不同的 mixin 中，然后在组件中引入。

• mixins：是一个数组，它可以包含多个 mixin 对象。当你需要将多个 mixin 应用到同一个组件时，可以使用 mixins 数组。这样组件将会合并所有在 mixins 数组中的 mixin 功能。

示例

// 定义两个不同的 mixin
const mixinOne = {
  data() {
    return {
      dataFromMixinOne: 'Data from Mixin One'
    }
  },
  created() {
    console.log('Mixin One created');
  }
}

const mixinTwo = {
  data() {
    return {
      dataFromMixinTwo: 'Data from Mixin Two'
    }
  },
  created() {
    console.log('Mixin Two created');
  }
}

// 使用 mixins 数组的组件
const CombinedComponent = {
  mixins: [mixinOne, mixinTwo],
  created() {
    console.log('Combined Component created');
  },
  template: `<div>
               <div>{{ dataFromMixinOne }}</div>
               <div>{{ dataFromMixinTwo }}</div>
             </div>`
}

在这个例子中，CombinedComponent 同时引入了 mixinOne 和 mixinTwo。当组件创建时，控制台将会输出：

Mixin One created
Mixin Two created
Combined Component created

这表明多个 mixin 对象的功能可以合并在同一个组件中使用。

总结

通过使用 mixins，开发者可以有效地管理重复的代码和功能，使构建的组件更具可重用性和灵活性。然而，过度依赖 mixins 可能会导致组件之间的关联性变得复杂，因此建议在必要时使用，并保持良好的文档记录。