详解Vue.js Mixins 混入使用

当我们在Vue.js开发中遇到一些需求/问题时，一般会去找相关的解决方式，但是如果每个组件都自己实现一遍，那这种方式太浪费时间了。Vue.js的混合（Mixins）可以很好的解决这个问题，它能将我们的特定代码逻辑抽取成可复用的模块，可以应用于任何组件中。

基础使用

混合可以定义一些公共的数据，方法，计算属性等使用于多个组件。在Vue.js中通过mixins属性定义一个混合，将它注册到Vue实例中，即可全局使用。下面是一个简单的使用示例：

// mixin.js

export default {
  data() {
    return {
      count: 0,
    };
  },

  methods: {
    increment() {
      this.count++;
    },
  },
};

// 使用混合的组件

<template>
  <div>
    <h3>{{title}}</h3>
    <button @click="increment">add count</button>
    <p>current count: {{count}}</p>
  </div>
</template>

<script>
import mixin from './mixin.js';

export default {
  name: 'my-component',
  mixins: [mixin],
  data() {
    return {
      title: 'My Component'
    };
  },
};
</script>

通过mixins选项我们可以传递包含混入对象的数组，可以包含单个混入或多个混入。这里我们将Mixin混入到实际的组件中，当组件使用时，混合的数据和方法都会混合到该组件中。

全局混入

我们可以将混入进行全局注册，以便在 Vue 的每个实例中混入该混入。不过要注意，使用此方法时要小心，因为它会影响每个组件实例。可以通过在main.js中注册整个Mixin然后引入到整个应用程序中。

import Vue from 'vue'
import mixin from './mixin.js'

Vue.mixin(mixin)

mixin的选项合并

当一个混入对象和组件选项包含同名选项时，这些选项会合并为一个选项，如下所示:

let mixin = {
  created() {
    console.log('Mixin created hook...');
  },
  data() {
    return {
      count: 0,
    };
  },
};

export default {
  name: 'my-component',
  mixins: [mixin],
  created() {
    console.log('Component created hook...');
  },
  data() {
    return {
      title: 'My Component',
      count: 1,
    };
  },
};

这两个created 和 data方法都会被调用。合并策略的功能包括合并数据，方法和钩子等。

mixin的深入理解

混合对象可以在任何地方注入进组件中，不仅可以在组件中注入，还可以和Vue实例，甚至到其他混合对象中进行注入。当某个组件和多个混合对象产生冲突时，需要了解混入模式的优先级，以决定如何解决问题。

Vue在每个生命周期钩子之前按顺序调用混合对象，因此混合对象可以被组合，有一种“纵向消除冲突”的行为。对于重复的属性，其优先级遵循以下原则：

• 同名项，组件的优先级最高，其次是混入对象，最后是全局混入对象。

• 对象类型，当数据对象和props对象发生冲突时，组件的数据优先级较高，混合对象的数据次之，任何全局混入对象的数据最后进行混合。

这些规则确保了值的来源顺序，而不会产生任何冲突。 在实际开发中，我们可以通过混合对象提供可重用且自定义的选项对象，使得组件可以被设计成更易于扩展，更灵活。

示例1

一个实用的 mixin 是注册全局的 Vue 组件，这样我们就不必在每个组件中都进行改操作了。

import Vue from 'vue'

const GlobalComp = Vue.component('GlobalComp', {
  ...
})

export default {
  components: { GlobalComp }
}

这样就可以在任何组件中使用该组件，而不必将这些组件注册为局部组件或重新注册它们。

<template>
  <div>
    <GlobalComp />
  </div>
</template>

<script>
export default {}
</script>

示例2

另一个实用的 mixin 是添加一个方法来手动更改页面标题:

const TitleMixin = {
  created() {
    this.$options.pageTitle && (document.title = this.$options.pageTitle)
  }
}

Vue.mixin(TitleMixin)

export default {
  pageTitle: 'Home'
}

这里创建了一个标题 mixin，用以设置页面标题。我们把 mixin 混入 Vue 实例中，然后在组件中定义一个 pageTitle 选项来设置页面标题。 可以轻松地修改标题，因为所有加载组件都已经被混入到了 mixin 中。