Constant rendering when changing styles

[drrastafarai]

Hello, I accidentally noticed that when I change the styles of an element, its child elements, which show the result of some function, constantly call this function.

I wonder why this happens?

const translatePosition = ref(0);

    <div
      class="box"
      :style="{ transform: `translateX(${translatePosition}px)` }"
    >
      {{ getSum(1, 2) }}
    </div>

When the translatePosition value changes the method getSum is called

codesandbox

[Deckluhm]

Computed properties (or "computed" for short) are what you are looking for here: https://vuejs.org/guide/essentials/computed.html

[LinusBorg]

I wonder why this happens?

Because any reactive change that has an impact on any part of the template will result in a re-evaluation of the whole template, and the whole DOM of the component will be updated in all the places where changes were identified.

[drrastafarai]

I understand. It was just unexpected to see this change in styles

[LinusBorg]

This will be achieved with "vapor mode" which is in development

https://github.com/vuejs/core-vapor