Subscribe on changes!

Suspense's fallback rendered manually with slot is not reactive

avatar
Sep 10th 2021

Version

3.2.11

Reproduction link

sfc.vuejs.org/

Steps to reproduce

  • Open link

What is expected?

The increment update suspense's fallback template

What is actually happening?

It stays as the initial value


From https://github.com/vuejs/vue-router-next/issues/1114

This is a very simplified version of what RouterView does to render its content

avatar
Sep 11th 2021

as a workaround:

    <template #fallback>
      <div :key="percentage">
        <h1>Loading {{ percentage }} </h1>
      </div>
    </template>

empty dynamicChildren will also take the fast path in patchElement. so I think maybe should avoid set dynamicChildren to an empty array. or update the condition as below:

-if (dynamicChildren) {
+if (optimized && dynamicChildren) {
    patchBlockChildren(n1.dynamicChildren, dynamicChildren, el, parentComponent, parentSuspense, areChildrenSVG, slotScopeIds);
    if (parentComponent && parentComponent.type.__hmrId) {
        traverseStaticChildren(n1, n2);
    }
}

image