Inline computed in templates for caching benefits

[qnp]

Hello dear community,
I have a structural question.

Say I have some kind of component which opens a slot with the current selected item (e.g. in a list).
Now I have a heavy processing method that transforms item into props of a presentational component, say mapItemToDisplayProps. What I would do is:

<MyListComponent [...]>
  <template #selection="{ item }">
     <MyDisplayComponent v-bind="mapItemToDisplayProps(item)">
     </MyDisplayComponent>
  </template>
</MyListComponent>

Whenever item changes, mapItemToDisplayProps is called regardless the computation could have been already done on a same item previously, and cached. My question is : can I use an inline computed to benefit from caching ? Is it really caching internally, after compilation of the template ?

<MyListComponent [...]>
  <template #selection="{ item }">
     <MyDisplayComponent v-bind="computed(() => mapItemToDisplayProps(item))">
     </MyDisplayComponent>
  </template>
</MyListComponent>

Thanks for your insights,
Best regards

[Shyam-Chen]

v-memo

[qnp]

Thanks, this is awesome.
Yet, for the sake of completeness, can the "computed" solution I suggest work ?
I'm still in a context of a Vue2.7 project...

[LinusBorg]

No.you would recreate a fresh computed on every render, which would then also need to run (for its first time) each time.

[qnp]

It makes sense. Thanks for the clear reply.