slot fallback content is always rendered even when not used

[houfeng0923]

Version

2.6.10

Reproduction link

https://codesandbox.io/s/vue-test-default-slot-always-exec-syuny

Steps to reproduce

when computed props or method declared in slot fallback , looks like this:

// XXX component

<slot>
       no render, but always run {{p}}, {{print()}} <Func/> 
</slot>

// use it 
<XXX>
 actual replaced content 
</XXX>

What is expected?

computed and method not invoked , because they can't render

What is actually happening?

computed is invoked once change.
method is invoked once render .

[posva]

This is expected behavior, methods get executed at every render

[posva]

On a second thought, maybe this could optimized when compiling the template: https://template-explorer.vuejs.org/#%3Cdiv%20class%3D%22hello%22%3E%0A%20%20%20%20%7B%7Bmsg%7D%7D%20%0A%20%20%20%20%20%3Cslot%3E%0A%20%20%20%20%20%20%20no%20render%2C%20but%20always%20run%20%7B%7Bp%7D%7D%2C%20%7B%7Bprint()%7D%7D%20%3CFunc%2F%3E%0A%20%20%20%20%20%3C%2Fslot%3E%0A%20%20%3C%2Fdiv%3E

A workaround is to wrap the slot fallback with an if:

<slot>
  <template v-if="!$slots.default">
       no render, but always run {{p}}, {{print()}} <Func/>
  </template>  
</slot>

[houfeng0923]

ye, $slots.default works sometimes. but if component use scopedSlots, the $slots.default is undefined .

[VictorCazanave]

If the component uses scoped slots, I think you can use $scopedSlots:

<slot :data="data">
  <template v-if="!$scopedSlots.default">
       no render, but always run {{p}}, {{print()}} <Func/>
  </template>  
</slot>

[StefanCardnell]

Hi @posva. Looking at the documentation around fallback content in Vue it says specifically:

Fallback Content
There are cases when it’s useful to specify fallback (i.e. default) content for a slot, to be rendered only when no content is provided.

that the provided content is rendered only when no content is provided. This contradicts what is happening here - content is being provided but the fall-back is still being rendered along with its method calls.

Also the behaviour seems arbitrary: computed properties and (non-functional) components in the fallback content aren't rendered/called, yet the methods still are. It's confusing to know what to expect out of fallback content in terms of overhead; if I have an expensive method being run in the fallback content, I wouldn't expect it to still run if something is slotted over it.

I think the documentation might need to be updated to clarify this.