How to prevent unnecessary re-render

I have the following template, why do the p elements re-render every time nextPage is clicked?Isn’t it unnecessary cause only the show state of p is changed but not the content. How to stop it?

<script>
  export default {
    data() {
     return {
       pages:3,
       currentPage: 1,
       lala:(i)=>{console.log(i);return {};},
       click: ()=>{this.currentPage = (this.currentPage+1)%this.pages + 1;},
    }
 }
}
</script>
<template>
<button @click="click()">nextPage</button>
    <Transition name="slide-fade" v-for="i in pages" >
      <p v-show="i == currentPage" :style="lala(i)">hello{{i}}</p>
    </Transition>
</template>
<style>
 .slide-fade-enter-active,.slide-fade-leave-active  {
    transition: all 0.3s ease-out;
    position: absolute;
  }
  .slide-fade-enter-from{
      transform: translateX(-20px);
      opacity: 0;
   }
  .slide-fade-leave-to {
    transform: translateX(20px);
    opacity: 0;
  }
  </style>

https://sfc.vuejs.org/#eNp9k8GOmzAQhl9lZKkS0QZIujeHRO0b9NBDD1wcMkm8NbZlD9ldRbx7B7MkaNNWQmD/M/48/GNfxXfvi0uHQooqNkF72tUW37wLBAc8qs4QXGsLcFCkssU4BghIXbDTDMCrE0b5vJzmTRcCWvrBsoT1TTbKKJnpxXZ3bZyNzmBh3ImFzQTsN/0dYnTzW0I2pE8aAJ11LGZ82EL2WXtaL74kLdUFT7DeTIAJ3w8ffvFTlbc/5wlh640iHGZU7TsiZ+FbqmVbi/TNFrXYsUtpr6occzgfoPoZlI2aNK+xqkVeEY0+YH5UB6wFXPKjCyxq0HY0jcW0ktd6Dseze03x7XZuImfJSO9mAA4msmVcwhmNcder7vuq9OP+5b0AFqpy/je2SggeFveict4BQ64a0hdczgMG1QU/AjC2mm5wCcoYWBXPEVBFzF1HyWLvbvE997cjZJk9/tuex+DaO5aNaeU4HAr+leVfV/5tkajOq0bTu4TVSHssk9yswgfUv0nc++SJWArdDqc+b5UvXqKzfCMSkZuRAtwpOR34WvCVGea1OBP5KMsyHpvhHr3EwoVTyaMidJZ0iwXGNt8H9xoxMLgWHwcwMUoWL2wF9/mAAcP/mJ9SH7jTgRb9H0teTc0=

because the job of v-show is to remove and add an element to the DOM based on a condition.
maybe you want v-if ?

edit: sorry, I mixed up the <!-- v-if --> placeholder comment :roll_eyes:

Actually it’s the other way around. v-if will add/remove the element to the DOM. v-show will show/hide the element visibly (using css’s display property), keeping it within the DOM.

Turn the element into a component. The reason it re-renders is because it has to run through the loop when you change the data because it has to re-evaluate everything within it. When you use a component Vue can determine if the component needs to be re-rendered based on the props that are passed to the component.

just curious: would a <component :is="'p'" ...> do the same trick?