fix(runtime-core): avoid traversing static children for vnodes w/ Pat…

…chFlags.BAIL (#11115) close #10547
vuejs · Jun 14, 2024 · b557d3f · b557d3f
1 parent 04729ba
commit b557d3f
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 1 deletion.
diff --git a/packages/runtime-core/__tests__/rendererFragment.spec.ts b/packages/runtime-core/__tests__/rendererFragment.spec.ts
@@ -3,6 +3,7 @@ import {
   NodeOpTypes,
   type TestElement,
   TestNodeTypes,
+  type VNode,
   createBlock,
   createCommentVNode,
   createTextVNode,
@@ -316,6 +317,64 @@ describe('renderer: fragment', () => {
     )
   })
 
+  // #10547
+  test('`template` fragment w/ render function', () => {
+    const renderFn = (vnode: VNode) => {
+      return (
+        openBlock(),
+        createBlock(
+          Fragment,
+          null,
+          [createTextVNode('text'), (openBlock(), createBlock(vnode))],
+          PatchFlags.STABLE_FRAGMENT,
+        )
+      )
+    }
+
+    const root = nodeOps.createElement('div')
+    const foo = h('div', ['foo'])
+    const bar = h('div', [h('div', 'bar')])
+
+    render(renderFn(foo), root)
+    expect(serializeInner(root)).toBe(`text<div>foo</div>`)
+
+    render(renderFn(bar), root)
+    expect(serializeInner(root)).toBe(`text<div><div>bar</div></div>`)
+
+    render(renderFn(foo), root)
+    expect(serializeInner(root)).toBe(`text<div>foo</div>`)
+  })
+
+  // #10547
+  test('`template` fragment w/ render function + keyed vnode', () => {
+    const renderFn = (vnode: VNode) => {
+      return (
+        openBlock(),
+        createBlock(
+          Fragment,
+          null,
+          [createTextVNode('text'), (openBlock(), createBlock(vnode))],
+          PatchFlags.STABLE_FRAGMENT,
+        )
+      )
+    }
+
+    const root = nodeOps.createElement('div')
+    const foo = h('div', { key: 1 }, [h('div', 'foo')])
+    const bar = h('div', { key: 2 }, [h('div', 'bar'), h('div', 'bar')])
+
+    render(renderFn(foo), root)
+    expect(serializeInner(root)).toBe(`text<div><div>foo</div></div>`)
+
+    render(renderFn(bar), root)
+    expect(serializeInner(root)).toBe(
+      `text<div><div>bar</div><div>bar</div></div>`,
+    )
+
+    render(renderFn(foo), root)
+    expect(serializeInner(root)).toBe(`text<div><div>foo</div></div>`)
+  })
+
   // #6852
   test('`template` keyed fragment w/ text', () => {
     const root = nodeOps.createElement('div')

diff --git a/packages/runtime-core/src/renderer.ts b/packages/runtime-core/src/renderer.ts
@@ -2473,7 +2473,8 @@ export function traverseStaticChildren(n1: VNode, n2: VNode, shallow = false) {
           c2 = ch2[i] = cloneIfMounted(ch2[i] as VNode)
           c2.el = c1.el
         }
-        if (!shallow) traverseStaticChildren(c1, c2)
+        if (!shallow && c2.patchFlag !== PatchFlags.BAIL)
+          traverseStaticChildren(c1, c2)
       }
       // #6852 also inherit for text nodes
       if (c2.type === Text) {