Classes are duplicated when using class binding
Version
3.2.23
Reproduction link
Steps to reproduce
I'm new to Vue and this is a rather trivial issue but I think it's kind of awkward when you first encounter it, and it should be fairly easy to fix. I've included an SFC playground link that explains and demonstrates it.
When you pass a class to a component that already exists on the root element of the component, Vue is smart enough to know that it shouldn't duplicate the class name in the class attribute, but when you also use class binding (i.e. :class) on the root element of the component, then Vue does duplicate the class name passed to the component from its parent.
What is expected?
When the button is disabled, the class attribute should look like class="button disabled".
What is actually happening?
But it actually looks like class="button disabled button", the second occurrence of button is redundant.
This is expected behavior. Redundant classes has no runtime implications and the performance overhead of deduping classes on every update is not worth it. It's also an edge where most of the time can be fixed by the end user.
Redundant classes has no runtime implications and the performance overhead of deduping classes on every update is not worth it.
Understandable but then why does Vue already dedupe classes when not using class binding?
It's also an edge where most of the time can be fixed by the end user.
Can you elaborate on that? How can it be fixed by the end-user?
