问题

我们最近开始将我们的应用从vue2迁移到vue3，一些组件已经添加了mixins，我想知道如何在vue 3中添加这些mixins。

我尝试了几种解决方案，但找不到像vue 2中可用的特殊hook。

export default {
  name: "Modal",
  components: { Loader },
  mixins: []
}
```如何添加mixins？

<details>
<summary>英文:</summary>

We have been lately started migration of our app to vue 3 from vue2 and some components have mixins added and i was wondering how can i add this in vue 3

I tried several solutions on this and couldn&#39;t find any special hook as available in vue 2

export default {
  name: &quot;Modal&quot;,
  components: { Loader },
  mixins: []
}`how can i add mixins`

</details>


# 答案1
**得分**: 0

In Vue 3, you can still use mixins in a similar way to Vue 2 when using the Options API:

    const mixin = {
      created() { console.log('Mixin'); },
    };
    
    export default {
      name: "Modal",
      components: { Loader },
      mixins: [mixin]
    };

But as for the Composition API, you have to use composable functions instead:

    // Composable declaration function
    import { onMounted } from 'vue';
    
    export function useMixin() {
      onMounted(() => console.log('Mixin'));
      return {};
    }
    
    // In your component
    import { useMixin } from './mixin';
    import Loader from './Loader';
    
    export default {
      name: "Modal",
      components: { Loader },
      setup() {
        useMixin();
        return {};
      },
    };

Composable functions provide a more explicit and flexible alternative to mixins when using Vue 3's Composition API.

<details>
<summary>英文:</summary>

In Vue 3, you can still use mixins in a similar way to Vue 2 when using the Options API:

    const mixin = {
      created() { console.log(&#39;Mixin&#39;); },
    };
    
    export default {
      name: &quot;Modal&quot;,
      components: { Loader },
      mixins: [mixin]
    };

But as for the Composition API, you have to use composable functions instead:

    // Composable declaration function
    import { onMounted } from &#39;vue&#39;;
    
    export function useMixin() {
      onMounted(() =&gt; console.log(&#39;Mixin&#39;));
      return {};
    }
    
    // In your component
    import { useMixin } from &#39;./mixin&#39;;
    import Loader from &#39;./Loader&#39;;
    
    export default {
      name: &quot;Modal&quot;,
      components: { Loader },
      setup() {
        useMixin();
        return {};
      },
    };

Composable functions provide a more explicit and flexible alternative to mixins when using Vue 3&#39;s Composition API.

</details>