having a child slot causes parent to render unnecessarily when the parent is being used in a scoped slot

[matthewma7]

Version

2.6.10

Reproduction link

https://jsfiddle.net/jfmorio/okvza9fu/8/

Steps to reproduce

Click on the ‘+1’ button

What is expected?

The render() function inside the component 'consumer' won't be called

What is actually happening?

the render function is called

---

If there is no grandchild slot, the render() won't be called.
https://jsfiddle.net/jfmorio/okvza9fu/10/

If it is not a scoped slot, it works as expected.
https://jsfiddle.net/jfmorio/okvza9fu/11/

If it an old syntax named slot. It works as expected.
https://jsfiddle.net/jfmorio/okvza9fu/13/
However, if the old syntax provides a slot scope. It will cause rendering.
https://jsfiddle.net/jfmorio/okvza9fu/22/
So basically, a scoped slot will cause the component to render when the component has a slot child. Even though neither the component or the slot child is using the variable within render.

[posva]

The new syntax makes it a scoped slot so it also used to render with the old syntax

<wrapper>
    <template slot="content" slot-scope="data">
      <consumer >
        <div>having this slot caused this problem</div>
      </consumer>
      </template>
  </wrapper>

That's why it needs to render the slot when wrapper renders, because the slot is rendered as part of wrapper since it passes data and when anything on the template changes, the whole template re renders. For a regular slot, the render happens when the root renders: https://jsfiddle.net/d1x2m0ck/ click the button with a number to see the alert

For slots to render only when things changes, we will need to change how slots are rendered. See #6351

[matthewma7]

Thank you for answering my question. 🙂
The behavior makes sense now but still undesired.