Rendering slots and updated hook

[stas-sl]

Hi, I faced a strange behaviour when rendering slots from render function.

Reproduction: sfc.vuejs.org

I have parent component with a slot. Inside it I put several child components varying only by passed property type. Also there is a counter in this slot. When it is incremented, I expect only parent component to be updated, as it is not used in any of child components. However if property passed to child component is array or object, then I notice that for these components updated hook is also invoked (child7 & child8 in the example above), but for chid5 & child6, which either don't have dummy property at all, or it has a primitive type like String. This is reproduced if I'm manually rendering slots as described in the documentation:

export default {
  setup(props, { slots }) {
    return () => h('div', ['ParentRender', slots.default()])   
  }
}

Trying to debug this issue, I created an alternative implementation of this component using template:

<template>
  <div>
    ParentTemplate
    <slot></slot>
  </div>
</template>

With this implementation everything worked as I expected, and none of child's updated hook was called, no matter which property types where passed to them.

Comparing generated code with my implementation, I noticed that there was used renderSlot function, and indeed, if I changed my implementation to:

export default {
  setup(props, { slots }) {
    return () => h('div', ['ParentRender', renderSlot(slots, "default")]) 
  }
}

the issue has gone.

Unfortunately I haven't found this function in the official documentation, so I'm not sure what is the purpose of this function? Should it be used from outside of Vue core? And why I'm seeing this difference in behaviour?

Would appreciate any clarification, thanks!

[stas-sl]

Seems related #5579

[edison1105]

[stas-sl]

Hmm, don't you think there should be consistent behaviour whether you're using templates or render? The issue is that parent components are not mine - I'm using Vuetify, which uses slots + render(JSX) a lot, basically whole application is inside multilevel slots, and I observe excessive updates whenever I change some state. I'm not sure I identified all causes yet, but this seems to be one of them. Somehow I get used that Vue is smart enough not to rerender what hasn't changed, so this behaviour was quite surprising to me.

[stas-sl]

For comparison I also replicated the same example using Vue 2 (2.6.14): https://codesandbox.io/s/vue2-slot-render-n89n0k?file=/src/App.vue

It works as I would expect - no updates, no matter if slot was rendered in render function/template, not depending on property type passed to child components. However the syntax seems to be slightly different (this.$slots.default - without brackets ()):

render(h) {
    return h("div", ["ParentRender", this.$slots.default]);
}

[edison1105]

likely a bug.

<Child name="child3" :dummy="[1]" />

should be compiled:

_createVNode(Child, {
  name: "child3",
  dummy: [1]
}, null, 8 /* PROPS */, ["dummy"]),

got:

_createVNode(Child, {
  name: "child3",
  dummy: [1]
}),

I think slots.default() is the correct one.
renderSlot will turn on optimization mode, causing the component to skip the update.

+  // optimized is true and patchFlag is 0 when use renderSlot in this scenario
+  // causing the component to skip the update.
  if (optimized && patchFlag >= 0) {
    if (patchFlag & PatchFlags.DYNAMIC_SLOTS) {
      // slot content that references values that might have changed,
      // e.g. in a v-for
      return true
    }
    if (patchFlag & PatchFlags.FULL_PROPS) {
      if (!prevProps) {
        return !!nextProps
      }
      // presence of this flag indicates props are always non-null
      return hasPropsChanged(prevProps, nextProps!, emits)
    } else if (patchFlag & PatchFlags.PROPS) {
      const dynamicProps = nextVNode.dynamicProps!
      for (let i = 0; i < dynamicProps.length; i++) {
        const key = dynamicProps[i]
        if (
          nextProps![key] !== prevProps![key] &&
          !isEmitListener(emits, key)
        ) {
          return true
        }
      }
    }
  }

[stas-sl]

Thanks for looking into this!

Just to clarify: if it will be compiled as you propose, child components will not update in this example?

Should I convert this discussion into an issue?

[edison1105]

I think the child component should be updated.
if we use [1,2,3](inline variable) in template, Each time the render function is re-executed, we will get a new variable [1,2,3]. so child components should be updated.

[stas-sl]

Hmm, do you mean it should be updated when using render function only or when using templates as well? Why in Vue 2 it wasn’t updating, but in Vue 3 it should?

[edison1105]

do you mean it should be updated when using render function only or when using templates as well?

yes.

Why in Vue 2 it wasn’t updating, but in Vue 3 it should?

I am not sure. I will contact our team member to discuss this.

template explorer:
with patchFlag: https://template-explorer.vuejs.org/#eyJzcmMiOiI8dGVtcGxhdGU+XHJcbiAgPENoaWxkIDpmb289XCIoWzFdKVwiIC8+XHJcbjwvdGVtcGxhdGU+Iiwic3NyIjpmYWxzZSwib3B0aW9ucyI6e319

No patchFlag: https://template-explorer.vuejs.org/#eyJzcmMiOiI8dGVtcGxhdGU+XHJcbiAgPENoaWxkIDpmb289XCJbMV1cIiAvPlxyXG48L3RlbXBsYXRlPiIsInNzciI6ZmFsc2UsIm9wdGlvbnMiOnt9fQ==

[stas-sl]

@edison1105, I see you strike out your answers, did you have a chance to discuss this behaviour?

[edison1105]

I'm not sure I understood it correctly, so I crossed out my answer. I have sent this discussion to others in the team and have not yet received a response.