本文将介绍混入，Vue 中的一种代码复用的方法。

一、什么是混入？

混入是 Vue 中的一种代码复用的方法。

二、步骤

• 定义混入对象，在混入对象中写入可复用的代码
• 在希望使用可复用代码的组件处混入混入对象

于是乎，混入对象中的内容将被 “混入” 目标组件中。

三、示例

定义混入对象：

export default {
    data() {
        return {
            num: 0
        }
    },
    methods: {
        addNum() {
            this.num++
        }
    }
}

混入混入对象：

<template>
  <div id="app">
    <p>{{ num }}</p>
    <button @click="addNum">添加</button>
  </div>
</template>

<script>
import num from "./mixins/num"

export default {
  name: 'App',
  mixins: [num]
}
</script>

效果：

四、重名问题

“混入” 不可避免地可能会出现重名问题。

比如混入对象中和组件中均定义了 add() 方法

如果组件和混入对象中发生重名问题，Vue 会以恰当的方式进行 “合并”，并在冲突无法解决时以组件优先。

• data 会递归合并，深合并，发生冲突时以组件优先

• 生命周期函数将合并为数组并依次调用

  混入中的生命周期函数优先调用

• methods、components 等值为对象的选项，将会合并为一个对象，并在名称冲突时以组件优先

五、全局混入

可以全局混入，混入后，混入对象将混入到每个组件之中。

Vue.mixin({
	···
})

参考

• 混入 — Vue.js