解析Vue混入（Mixin）机制：灵活分发可复用功能-JXin的博客

温馨提示

该文章距离上次更新已经过去了 1376 天，文章内容可能已经过时。

混入
混入对象与组件的属性和方法的合并
全局混入

混入

混入（Mixin）为Vue组件的可复用功能提供了一种灵活的分发方式。一个混入对象可以包含各种组件属性和方法。当组件使用混入对象时，所有混入对象的属性和方法都会被“混入”到该组件自身的属性和方法中。

例如：

export default {
 data() {
 	return {
		hello: "hello",
	};
 },
 created() {
   this.sayHello();
  },
 methods: {
   sayHello() {
      console.log(this.hello);
    },
  },
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

再通过mixins混入到组件中

<template>
 <div id="app"></div>
</template>

<script>
import sayHello from "@/mixin/hello";
export default {
 mixins: [sayHello],
 data() {
   return {};
  },
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13

这样该组件会先执行mixin中的created钩子函数，打印出hello，然后再执行自身的created钩子函数

混入对象与组件的属性和方法的合并

合并

当组件和混入对象有同名属性和方法时，这些属性和方法将以恰当的方式进行“合并”

数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先

<template>
 <div id="app"></div>
</template>

<script>
import sayHello from "@/mixin/hello";
export default {
 mixins: [sayHello],
 data() {
 return {
     hello: "olled",
    };
  },
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

这时候组件中也有hello，则会以组件中的数据优先，打印出olled，mixin自身打印出的hello则为undefined

如果有同名的钩子函数则会合并为一个数组，因此都将被调用。混入对象的钩子函数将在组件自身钩子函数之前调用。例如：

// 定义一个混入对象
const myMixin = {
  created() {
    console.log('Mixin created');
  }
};

// 定义一个组件，并在其中使用混入对象
const myComponent = {
  mixins: [myMixin], // 使用混入对象
  created() {
    console.log('Component created');
  }
};

// 创建一个Vue实例，观察钩子函数的调用顺序
new Vue(myComponent);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

在这个例子中，当创建Vue实例时，created钩子函数将首先调用混入对象中的钩子函数，然后再调用组件自身的钩子函数。因此，控制台输出将是：

Mixin created
Component created

1
2

值为对象的属性和方法，例如methods、components将会被合并为同一个对象。两个对象健名冲突时，取组件对象的键值对。

全局混入

混入也可以进行全局注册。一旦使用全局混入，它将影响每一个之后创建的Vue实例。

Vue.mixin({
 created() {
   console.log(this.$options.hello);
  },
});

new Vue({
 hello: "hheelloo"
});

1
2
3
4
5
6
7
8
9