一、简介

混入 (mixin)提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项：生命周期钩子、方法、数据、计算属性、监听属性等。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

// 定义一个混入对象
var myMixin = {
  created: function () {
    this.hello();
  },
  methods: {
    hello: function () {
      console.log("hello from mixin!");
    },
  },
};

// 定义一个使用混入对象的组件
var Component = Vue.extend({
  mixins: [myMixin],
});

var component = new Component(); // => "hello from mixin!"

二、优点

1. 代码复用：通过混入，可以将一些通用的逻辑封装在一个混入对象中，并在需要的组件中引入该混入对象，实现代码的复用。
2. 功能扩展：混入可以用来扩展组件的功能，比如添加一些生命周期钩子函数、方法、计算属性等。当多个组件需要相同的功能时，可以使用混入来统一添加这些逻辑，避免重复编写代码。
3. 组件配置的组合：通过混入，我们可以将一些组件配置选项合并到组件的配置中，从而实现灵活的配置组合。这对于多个组件需要共享相同的配置选项时非常有用。

三、合并策略

当组件和混入对象含有同名选项时，这些选项会进行“合并”。

• 值为对象的： 例如 data、methods、components 和 directives，数据对象在内部会进行递归合并，并在发生冲突时以组件内原有数据优先。
• 生命周期钩子： 同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。即先执行混入对象的同名钩子，后执行组件自身的同名钩子

四、注意

混入也可以进行全局注册。使用时格外小心！一旦使用全局混入，它将影响每一个之后创建的 Vue 实例。使用恰当时，这可以用来为自定义选项注入处理逻辑。

// 为自定义的选项 'myOption' 注入一个处理器。
Vue.mixin({
  created: function () {
    var myOption = this.$options.myOption;
    if (myOption) {
      console.log(myOption);
    }
  },
});

new Vue({
  myOption: "hello!",
});
// => "hello!"

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24