vue 中 mixin 和 mixins 区别

前言

用法

全局Mixin

局部Mixin

代码

理解

高质量的Mixin使用

在Vue.js框架中，Mixin是一种非常重要和强大的功能，它允许开发者创建可复用的代码片段，并将其应用到一个或多个组件中。Vue提供了两种方式来使用Mixin，分别是全局Mixin和局部Mixin。本文将详细介绍这两种Mixin的使用方法、代码实例以及它们之间的区别，帮助开发者更好地理解和运用Vue中的Mixin功能。

前言

在开发大型Vue应用时，我们经常会遇到一些功能或逻辑在多个组件中重复出现的情况。为了避免代码重复并提高代码的可维护性，我们可以使用Mixin来抽取公共的功能或逻辑，然后在需要的组件中引入并使用它们。Mixin提供了一种非常灵活和高效的方式来组织和复用代码。

用法

Vue中的Mixin主要有两种用法：全局Mixin和局部Mixin。

全局Mixin

全局Mixin是通过Vue.mixin方法定义的，一旦定义，它将影响到所有Vue的组件实例。这意味着在任何一个组件的生命周期钩子中，全局Mixin的钩子函数将被调用。

// 定义一个全局Mixin
Vue.mixin({
  created() {
    console.log('全局Mixin的created钩子被调用')
  }
})
 
new Vue({
  created() {
    console.log('组件的created钩子被调用')
  }
})
// 控制台输出：
// 全局Mixin的created钩子被调用
// 组件的created钩子被调用

局部Mixin

局部Mixin是通过在组件的mixins选项中定义的，它只会影响到引入它的那个组件实例。

// 定义一个局部Mixin
const myMixin = {
  created() {
    console.log('局部Mixin的created钩子被调用')
  }
}
 
new Vue({
  mixins: [myMixin],
  created() {
    console.log('组件的created钩子被调用')
  }
})
// 控制台输出：
// 局部Mixin的created钩子被调用
// 组件的created钩子被调用

代码

下面通过一个实际的例子来演示如何使用Mixin。

假设我们有一个需求，需要在多个组件中显示用户的信息，并且在组件创建时从服务器获取用户数据。我们可以使用Mixin来抽取获取用户数据的逻辑：

// userMixin.js
export default {
  data() {
    return {
      user: null
    }
  },
  async created() {
    this.user = await this.fetchUserData()
  },
  methods: {
    async fetchUserData() {
      // 模拟从服务器获取用户数据
      return { name: '张三', age: 30 }
    }
  }
}

然后在需要显示用户信息的组件中引入并使用这个Mixin：

<template>
  <div>
    <h1>用户信息</h1>
    <p v-if="user">姓名：{{ user.name }}</p>
    <p v-if="user">年龄：{{ user.age }}</p>
  </div>
</template>
 
<script>
import userMixin from './userMixin'
 
export default {
  mixins: [userMixin]
}
</script>

通过这种方式，我们就可以在多个组件中复用获取用户数据的逻辑，提高了代码的复用性并减少了代码的冗余。