Mixin的技巧笔记

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第6天，点击查看活动详情

我在使用vue框架编写函数时经常遇到多个页面会使用同一个函数的情况，这时我就会复制粘贴到每个文件中去，实现复用，但是这样会导致我的代码会显得冗余，不够优雅，我们写代码最重要的是什么，是优雅。

vue给我们提供了Mixin， mix in 不是mi xin，是混入不是迷信。

Mixin提供了一种非常灵活的方式，来分发vue组件中的可复用功能，一个mixin对象可以包含任意组件选项，它能做的远不止函数的复用，它可以将你组件中写的所有都分发到目标组件中。 在框架中使用时我们需要先引入再使用

import mixin from 'mixin'
exprot default{
    ....
    mixin:[mixin],
    ....
}

使用mixin时会出现一个问题，如果mixin中的命名和我当前组件中的命名发生冲突了怎么办呢 当组件和 mixin 对象含有同名选项时，这些选项将以恰当的方式进行“合并”。 比如，每个 mixin 可以拥有自己的 data 函数。每个 data 函数都会被调用，并将返回结果合并。在数据的 property 发生冲突时，会以组件自身的数据为优先。

而当钩子函数发生合并时是否和普通命名一样呢。这里vue文档中给出了，当钩子函数发生合并时，同名钩子函数将会合并为一个数组，因此都将调用，并且mixin的钩子函数将会先于组件之前调用。

const myMixin = {
  created() {
    console.log('mixin 对象的钩子被调用')
  }
}

const app = Vue.createApp({
  mixins: [myMixin],
  created() {
    console.log('组件钩子被调用')
  }
})

// => "mixin 对象的钩子被调用"
// => "组件钩子被调用"

可以合并的都会合并成一个，例如methods、components和directives，将会合并成同一个对象，而两个对象名字发生冲突，则是以组件本身的为准，外来的权重当然不如本土的了。

还可以为全局引入mixin，给app mixin，这时要注意mixin是会影响所有组件的，就像provide注入一样，不管哪层的子组件。