Understanding the difference between computed vs in-template expressions

[aurelsserban]

I've read the documentation for computed props.

However, I can't really understand if there is any difference between the in-template expressions and the computed props. (From the computed docs I understand that is basically no differences).

I am aware of the fact that the computed props are much more terse and even recommended in the style guide in order for the template to not get cluttered.

What I am trying to understand and determine is if there could be any performance penalty of using in-template expression vs a computed prop.

<div :style="styleObject"></div>

where styleObject is

computed: {
  styleObject() {
    return {
      color: this.color
    }
  }
}

vs

<div :style="{ color }"></div>

In the Vue.js application I’ve been working on, there are many cases where object literals are used directly inside the template. I was curious whether switching these to computed properties would have performance benefits, especially since computed properties are cached based on their dependencies.

My initial assumption was that in-template expressions, especially those that create new object literals, would be re-evaluated on each render, while computed properties would avoid that cost thanks to caching. However, after investigating and creating some isolated tests, I found no measurable performance difference between the two approaches. That was a bit disappointing, because I expected computed properties to show some clear advantage.

Then I came across this section of the documentation on computed stability, and now I’m a bit confused about how rendering and caching actually work in Vue. I'm trying to better understand when computed properties offer performance benefits, how their caching behaves during rendering, and why using inline object literals in templates doesn’t seem to incur the cost I was expecting.

Maybe the example is a bit contrived and the usage of style attribute is not really reflecting the real world examples....or vue does some optimization under the hood of the style specifically. But what about other objects passed as in-template expressions?

There is a huge probability that the question is dumb, but I am very confused right now...

Could someone clarify what’s really happening under the hood?