Using v-if with v-slot directive cause unnecessary update hook
Vue version
3.2.40
Link to minimal reproduction
Steps to reproduce
Open the devtools to see the log messages.
What is expected?
onUpdated shouldn't be called on Comp component.
What is actually happening?
onUpdated is called on both App and Comp.
System Info
No response
Any additional comments?
No response
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
@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
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>
@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.