Is there a way to make v-bind more efficient?

[matthew-dean]

In my last job, I used React + Styled Components. Now, I fully recognize that the way Styled Components dynamically injects classes is terribly bad for performance (because of constant style recalculation), and technically Vue is doing it a better way.

That said, is there any way to make these declarations more efficient?

All of the inner <div>s are in a for loop in a component, so I'm wondering if there's any way to promote a single style declaration to the section (since they are repeated), or if there's been any kind of discussion of Vue making this kind of optimization. Or some kind of optimization where a "set" of style declarations are cached to a CSS class, but maybe pre-computed?

Technically, because these properties are all static values at compile time, there's no reason Vue couldn't generate class variants per instance in a much more streamlined way via static analysis. (It wouldn't be trivial / easy to do; I just mean it's perfectly possible.)

As a follow-up question, is there documentation on how one might create a Vue CSS plugin that generates different output?

[chenxch]

<template>
  <div class="text" v-for="item in 10" :key="item">hello</div>
</template>

<script>
export default {
  data() {
    return {
      color: 'red'
    }
  }
}
</script>

<style>
.text {
  color: v-bind(color);
}
</style>

refer to css v-bind.

[matthew-dean]

I’m sorry, what? This is not an answer to my question.

[chenxch]

I may not have thought of a good way to solve it directly on the basis of the architecture, but if I developed it, I might wrap the loop in a layer, put variables in the wrapping layer, and the loop part inherits this style property.

[oleksandr-dukhovnyy]

Specifically in your case, you can assign variables to the parent section. CSS variables are inherited.

[codethief]

Sure if you write those custom CSS properties by hand you can do a lot of things. But I would argue that in most cases the parent component shouldn't know anything about the child component's styling. That would defeat the whole idea of re-usable components and of keeping styles local to components.

If anything, such optimizations should be handled by v-bind behind the scenes. (Though right off the bat I'm unsure whether this particular optimization would actually work well. – Consider the case where a few of those components in that loop change their state.)

[LinusBorg]

Edit: Wow, just realized this question is 18 months old ^^

You didn't provide the code that generated these styles, but I assume that each div actually represents a component, because these generated CSS variables are injected into component root nodes.

That also explains why what you first propose - lifting them up to the parent element - isn't really achievable:

The parent element is rendered by the parent component, while each of the divs is rendered by the respective child component. Moving those declarations from the divs up to the section would require the child component to manipulate elements managed by the parent component. While technically not impossible, this is a complex change with all sorts of possible edge cases to cover, and from a principle standpoint, it breaks component encapsulation.

But there's another, bigger issue: each child component has its own local state that is being reflected in these CSS variables. And each child component can independently change this state. These different states would overwrite each other when the variables were moved to a single parent element.

To work around that, each child component instance would have to dynamically create the variable name at runtime, which isn't possible because the CSS referencing these variables is static after build.

Moving them into a class is also not really possible, for the same reason: CSS classes etc become static after rendering, and these variables need to be updated during runtime.

[matthew-dean]

But there's another, bigger issue: each child component has its own local state that is being reflected in these CSS variables. And each child component can independently change this state. These different states would overwrite each other when the variables were moved to a single parent element.

You misunderstood what I was saying, although, to be fair, you're correct I didn't paste the template code. In this case, all of the repeated style declarations are part of a single component, so I'm not really asking about crossing any component / state boundary.

[Justineo]

If the component has multiple root level elements, we'll have to render the custom properties onto each one of them. You can alternatively move the <section> part into the component so that it's now a single rooted component that these custom properties are only rendered once on the root element.