Is there a difference between using v-if in a parent component and using v-if on a child component's root?

Question

Let's say we have two components - <Parent/> and <Child />, and the child has to be rendered conditionally. Is there a difference between using v-if in the parent where it renders the child and using it in the child on the root element ?

Parent doing conditional rendering:

<!-- Parent.vue -->
<div>
  <Child v-if="displayChild' />
</div>

<!-- Child.vue -->
<div>
  ...
</div>

Child doing conditional rendering:

<!-- Parent.vue -->
<div>
  <Child />
</div>

<!-- Child.vue -->
<div v-if="displayChild">
  ...
</div>

I know they effectively do the same, but is there maybe something like vue being able to do more optimizations when parent does the conditional rendering? Or does one way have some other benefits compared to the other?

Answer 1

I would suppose that keeping the v-if in the parent prevents the lifecycle for the child component to not be invoked since the the child component is not rendered, whereas putting it in the child requires the the child component to load before the v-if would be processed?