mixin

官方说，Mixin 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个 mixin 对象可以包含任意组件选项。当组件使用 mixin 对象时，所有 mixin 对象的选项将被“混合”进入该组件本身的选项。但值得我们注意的是：不建议在应用代码中使用，除非特殊情况，否则不建议使用mixin。

如何使用

我们可以全局使用，也可以局部使用。

局部使用

//混合函数
const myMixin = {
  methods: {
    hello() {
      console.log('hello from mixin!')
    }
  }
}

// 使用
const app = Vue.createApp({
  mixins: [myMixin]
})

这样我们就可以在实例中使用hello函数了。记住mixins是个数组，你可以使用多个混合对象。

全局使用

app.mixin({
  methods: {
    hello() {
      console.log('全局使用!')
    }
  }
})

值得我们注意的是：一旦使用全局 mixin，它将影响每一个之后创建的组件。

选项合并

当组件和 mixin 对象含有同名选项时，它们会被合并起来。当他们合并的时候，mixin的created钩子先执行，数据和方法都会被组件覆盖。如下：

自定义mixin

const myMixin = {
    setup() {
        const title = ref("Hi, world!")

        function conflicting() {
            console.log('from mixin')
        }

        return {
            title,
            conflicting
        }
    },
    created() {
        console.log('mixin 对象的钩子被调用')
    }

}

组件混合

const app = createApp({
    setup() {
        const title = ref("Hello, world!")

        function conflicting() {
            console.log('from self')
        }

        return {
            title,
            conflicting
        }
    },
    mixins: [myMixin],
    created() {
        console.log('组件钩子被调用')
    }
})

最后的执行结果是：

打印结果：先 mixin 对象的钩子被调用，后组件钩子被调用。
使用title的值是：Hello, world!。
调用conflicting的结果是：from self。

mount

所提供 DOM 元素的 innerHTML 将被替换为应用根组件的模板渲染结果。俗称挂载，如果我们想把创建的应用实例挂载到一个id="#app"的DOM元素上，我们可以这样做：

app.mount("#app")

这里有需要我们注意的地方：Vue2中是直接替换掉这个dom，而Vue3中只会替换掉dom里面的innerHTML。不知你们有没有注意到在用vue-cli构建项目的时候App.vue文件的变化。

Vue2

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

Vue3

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

我们可以看出在Vue3中少了一层div#appdom，这是因为挂载的方法发生了变化。

unmount

卸载应用实例的根组件。跟mount相对比，我们可以看出unmount是卸载应用实例的方法，使用方法如下：

app.unmount()

总结

如果我们自己构建项目，需要考虑挂载、卸载以及挂载在Vue3发生变化的问题；如果是用vue-cli构建项目，一般我们不需要考虑这些问题。
mixin要慎用，尤其是用在全局的时候。我们现在可以用setup函数来处理统一逻辑相关的变量、方法等问题。

想了解更多文章，传送门已开启：回首Vue3目录篇！

回首Vue3之API篇（三）

mixin

如何使用

选项合并

mount

unmount

总结