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?

  export default {
    data() {
     return {
       currentPage: 1,
       lala:(i)=>{console.log(i);return {};},
       click: ()=>{this.currentPage = (this.currentPage+1)%this.pages + 1;},
<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>
 .slide-fade-enter-active,.slide-fade-leave-active  {
    transition: all 0.3s ease-out;
    position: absolute;
      transform: translateX(-20px);
      opacity: 0;
  .slide-fade-leave-to {
    transform: translateX(20px);
    opacity: 0;

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?