Subscribe on changes!

Using v-if with v-slot directive cause unnecessary update hook

avatar
Oct 7th 2022

Because it's DYNAMIC_SLOTS, the function shouldUpdateComponent will return true, the component will update and the lifecycle onUpdated will trigger. https://github.com/vuejs/core/blob/2a9e9a40963a852238adc4c61b86d0c48e7131fa/packages/runtime-core/src/componentRenderUtils.ts#L345-L349 image

avatar
Oct 13th 2022

@SuzumiyaHaku v-if="true" doesn't make sense in any real apps, I used it just to make a short description of the problem and the real problem is something like this

avatar
Oct 14th 2022

I think you need the v-memo directive.

<template>
  <h1>{{ counter }}</h1>
  <Comp  v-memo="[showHeader]">
    <template v-if="showHeader" #header>
      Header here
    </template>
  </Comp>
</template>
avatar
Oct 14th 2022

@SuzumiyaHaku Thanks for your v-memo suggestion! There is another way to solve this:

<template>
  <h1>{{ counter }}</h1>
  <Comp>
    <template #header>
      <template v-if="showHeader">
         Header here
      </template> 
    </template>
  </Comp>
</template>

The main point of this issue is that I think the combination of v-if and v-slot in this case surely is a performance pitfall so we either fix it, or we should at least mention it to the docs.