vue 中的 mixin

在 Vue 中，mixin 是一种代码复用的方式，它允许我们将一些常用的选项或逻辑封装到一个 mixin 对象中，并在组件中引入。被 mixin 对象包含的选项和逻辑将被合并到组件中，从而实现代码的复用。

一个 mixin 对象可以包含一个或多个 Vue 选项，例如 data、methods、computed、watch 等。当一个组件引入了一个 mixin 对象时，该组件会使用 Vue 的选项合并策略，将 mixin 对象中的选项与组件中的选项进行合并，并且 mixin 对象中的选项的优先级低于组件中的选项，比如组件自身定义的 data 选项会覆盖 mixin 对象中的 data 选项。

下面是一个简单的 mixin 对象的例子，它包含了一个 mounted 钩子函数：

const myMixin = { 
    mounted() { 
        console.log('Mixin mounted.') 
    } 
}

在组件中引入该 mixin 对象可以使用 mixins 选项：

复制代码

在上面的例子中，我们定义了一个组件 MyComponent，它引入了一个 mixin 对象 myMixin。在 MyComponent 组件中，当 mounted 钩子函数被执行时，Mixin mounted. 和 Component mounted. 会同时被打印出来，这说明 myMixin 中的 mounted 函数已经被合并到 MyComponent 组件中了。

使用 mixin 可以帮助我们避免重复编写相同的代码，提高代码的复用性和可维护性。但是需要注意的是，使用 mixin 可能会导致代码的结构变得复杂，因此需要合理使用，避免滥用。