Menu
After reading the plan for Vue 3, I noticed that the statement mixins will still be supported. However, Should I convert all of mixins components to class-based-components in case that Vue stops supporting mixins in the future?
mixins:
export default class MyComponent extends mixins(A, B, C) { }
311
In Vue 3, you can use the application API mixin method. For components, you can add them one by one.
Mixins are a flexible way to distribute reusable functionalities for Vue components. A mixin object can contain any component options. When a component uses a mixin, all options in the mixin will be “mixed” into the component's own options.
To use the Mixin in any component, you simply have to import the Mixin module and assign it to the mixins configuration property in the component. At runtime, the options specified in the Mixin will be available as options and will be “mixed” into the consuming component's options.
Mixins are a flexible way to let us add reusable functionalities to Vue components. A mixin object can have any component options. When a component uses a mixin, the mixin will be merged into the component’s own options. For example, we can create a mixin and use it by writing:
By using mixins helper, TypeScript can infer mixin types and inherit them on the component type. Example of declaring mixins Hello and World: // mixins.js import Vue from 'vue' import Component from 'vue-class-component' // You can declare mixins as the same style as components.
If you’re familiar with Vue 2, you’ve probably used a mixin for this purpose. But the new Composition API, which is available now as a plugin for Vue 2 and an upcoming feature of Vue 3, provides a much better solution.
The default (but optionally configurable) merge strategy for Vue components dictates that local options will override mixin options. There are exceptions though. For example, if we have multiple lifecycle hooks of the same type, these will be added to an array of hooks and all will be called sequentially.
The class API that was originally planned for Vue 3 has been dropped and replaced with the composition API. While mixins will still be supported, composition functions have a number of advantages, such as avoiding namespace clashing, making it clearer where properties come from, and playing friendlier with Typescript.
Once Vue 3 is released I would recommend not writing more mixins but using Composition Functions. It'll be up to you to consider whether you rewrite old mixins - it will depend on whether you think the benefits of composition functions outweigh the initial cost of rewriting old mixins.
161
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
