From 45403e34bdda4c9281a71c3589093b0b6a823fe3 Mon Sep 17 00:00:00 2001
From: linzhe <linzhe141@qq.com>
Date: Sat, 16 Nov 2024 16:52:29 +0800
Subject: [PATCH 1/3] fix: should check if it is STABLE_FRAGMENT at runtime

---
 packages/runtime-core/src/renderer.ts |  3 ++-
 packages/vue/__tests__/index.spec.ts  | 30 +++++++++++++++++++++++++++
 2 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/packages/runtime-core/src/renderer.ts b/packages/runtime-core/src/renderer.ts
index 90cc22f54..98f59f8e1 100644
--- a/packages/runtime-core/src/renderer.ts
+++ b/packages/runtime-core/src/renderer.ts
@@ -1079,7 +1079,8 @@ function baseCreateRenderer(
         dynamicChildren &&
         // #2715 the previous fragment could've been a BAILed one as a result
         // of renderSlot() with no valid children
-        n1.dynamicChildren
+        n1.dynamicChildren &&
+        n1.dynamicChildren.length === dynamicChildren.length
       ) {
         // a stable fragment (template root or <template v-for>) doesn't need to
         // patch children order, but it may contain dynamicChildren.
diff --git a/packages/vue/__tests__/index.spec.ts b/packages/vue/__tests__/index.spec.ts
index 0c969f159..c1af3a275 100644
--- a/packages/vue/__tests__/index.spec.ts
+++ b/packages/vue/__tests__/index.spec.ts
@@ -311,4 +311,34 @@ describe('compiler + runtime integration', () => {
     app.mount(root)
     expect(root.innerHTML).toBe('<div>60000000100000111</div>')
   })
+
+  test('should correctly update when reactive state and normal array are modified', async () => {
+    const count = ref(0)
+    const foo: any[] = []
+    function updateFoo() {
+      for (let n = 0; n < 3; n++) {
+        foo[n] = n + 1 + '_foo'
+      }
+    }
+    const app = createApp({
+      setup() {
+        return {
+          count,
+          foo,
+        }
+      },
+      template: `
+      <div>{{count}}</div>
+      <div v-for='item in foo'>{{ item }}</div>`,
+    })
+    const root = document.createElement('div')
+    app.mount(root)
+    expect(root.innerHTML).toBe('<div>0</div>')
+    updateFoo()
+    count.value++
+    await nextTick()
+    expect(root.innerHTML).toBe(
+      '<div>1</div><div>1_foo</div><div>2_foo</div><div>3_foo</div>',
+    )
+  })
 })

From 9291afe66bfb4c19164ff9d6bb6f456cb30b4274 Mon Sep 17 00:00:00 2001
From: linzhe <linzhe141@qq.com>
Date: Mon, 18 Nov 2024 21:42:55 +0800
Subject: [PATCH 2/3] chore: update test case

---
 .../__tests__/rendererOptimizedMode.spec.ts   | 59 ++++++++++++++++++-
 packages/vue/__tests__/index.spec.ts          | 30 ----------
 2 files changed, 58 insertions(+), 31 deletions(-)

diff --git a/packages/runtime-core/__tests__/rendererOptimizedMode.spec.ts b/packages/runtime-core/__tests__/rendererOptimizedMode.spec.ts
index 958c12748..7c53a8af7 100644
--- a/packages/runtime-core/__tests__/rendererOptimizedMode.spec.ts
+++ b/packages/runtime-core/__tests__/rendererOptimizedMode.spec.ts
@@ -29,7 +29,7 @@ import {
   setBlockTracking,
   withCtx,
 } from '@vue/runtime-test'
-import { PatchFlags, SlotFlags } from '@vue/shared'
+import { PatchFlags, SlotFlags, toDisplayString } from '@vue/shared'
 import { SuspenseImpl } from '../src/components/Suspense'
 
 describe('renderer: optimized mode', () => {
@@ -270,6 +270,63 @@ describe('renderer: optimized mode', () => {
     )
   })
 
+  test('PatchFlags: PatchFlags.STABLE_FRAGMENT with change array item', async () => {
+    const count = ref(0)
+    const foo: any = []
+    function updateFoo() {
+      for (let n = 0; n < 3; n++) {
+        foo[n] = n + 1 + '_foo'
+      }
+    }
+    const Comp = {
+      setup() {
+        return () => {
+          // <div>{{ count }}</div>
+          // <div v-for='item in foo'>{{ item }}</div>
+          return (
+            openBlock(),
+            createElementBlock(
+              Fragment,
+              null,
+              [
+                createElementVNode(
+                  'div',
+                  null,
+                  toDisplayString(count.value),
+                  1 /* TEXT */,
+                ),
+                (openBlock(),
+                createElementBlock(
+                  Fragment,
+                  null,
+                  renderList(foo, item => {
+                    return createElementVNode(
+                      'div',
+                      null,
+                      toDisplayString(item),
+                      1 /* TEXT */,
+                    )
+                  }),
+                  64 /* STABLE_FRAGMENT */,
+                )),
+              ],
+              64 /* STABLE_FRAGMENT */,
+            )
+          )
+        }
+      },
+    }
+
+    render(h(Comp), root)
+    expect(inner(root)).toBe('<div>0</div>')
+    updateFoo()
+    count.value++
+    await nextTick()
+    expect(inner(root)).toBe(
+      '<div>1</div><div>1_foo</div><div>2_foo</div><div>3_foo</div>',
+    )
+  })
+
   // A Fragment with `UNKEYED_FRAGMENT` flag will always patch its children,
   // so there's no need for tracking dynamicChildren.
   test('PatchFlags: PatchFlags.UNKEYED_FRAGMENT', async () => {
diff --git a/packages/vue/__tests__/index.spec.ts b/packages/vue/__tests__/index.spec.ts
index c1af3a275..0c969f159 100644
--- a/packages/vue/__tests__/index.spec.ts
+++ b/packages/vue/__tests__/index.spec.ts
@@ -311,34 +311,4 @@ describe('compiler + runtime integration', () => {
     app.mount(root)
     expect(root.innerHTML).toBe('<div>60000000100000111</div>')
   })
-
-  test('should correctly update when reactive state and normal array are modified', async () => {
-    const count = ref(0)
-    const foo: any[] = []
-    function updateFoo() {
-      for (let n = 0; n < 3; n++) {
-        foo[n] = n + 1 + '_foo'
-      }
-    }
-    const app = createApp({
-      setup() {
-        return {
-          count,
-          foo,
-        }
-      },
-      template: `
-      <div>{{count}}</div>
-      <div v-for='item in foo'>{{ item }}</div>`,
-    })
-    const root = document.createElement('div')
-    app.mount(root)
-    expect(root.innerHTML).toBe('<div>0</div>')
-    updateFoo()
-    count.value++
-    await nextTick()
-    expect(root.innerHTML).toBe(
-      '<div>1</div><div>1_foo</div><div>2_foo</div><div>3_foo</div>',
-    )
-  })
 })

From 5487e1f505eb2cb10d6f00cb46db97760c717222 Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Mon, 18 Nov 2024 21:54:14 +0800
Subject: [PATCH 3/3] test: update test

---
 .../__tests__/rendererOptimizedMode.spec.ts   | 115 +++++++++---------
 1 file changed, 58 insertions(+), 57 deletions(-)

diff --git a/packages/runtime-core/__tests__/rendererOptimizedMode.spec.ts b/packages/runtime-core/__tests__/rendererOptimizedMode.spec.ts
index 7c53a8af7..efdd6df01 100644
--- a/packages/runtime-core/__tests__/rendererOptimizedMode.spec.ts
+++ b/packages/runtime-core/__tests__/rendererOptimizedMode.spec.ts
@@ -270,63 +270,6 @@ describe('renderer: optimized mode', () => {
     )
   })
 
-  test('PatchFlags: PatchFlags.STABLE_FRAGMENT with change array item', async () => {
-    const count = ref(0)
-    const foo: any = []
-    function updateFoo() {
-      for (let n = 0; n < 3; n++) {
-        foo[n] = n + 1 + '_foo'
-      }
-    }
-    const Comp = {
-      setup() {
-        return () => {
-          // <div>{{ count }}</div>
-          // <div v-for='item in foo'>{{ item }}</div>
-          return (
-            openBlock(),
-            createElementBlock(
-              Fragment,
-              null,
-              [
-                createElementVNode(
-                  'div',
-                  null,
-                  toDisplayString(count.value),
-                  1 /* TEXT */,
-                ),
-                (openBlock(),
-                createElementBlock(
-                  Fragment,
-                  null,
-                  renderList(foo, item => {
-                    return createElementVNode(
-                      'div',
-                      null,
-                      toDisplayString(item),
-                      1 /* TEXT */,
-                    )
-                  }),
-                  64 /* STABLE_FRAGMENT */,
-                )),
-              ],
-              64 /* STABLE_FRAGMENT */,
-            )
-          )
-        }
-      },
-    }
-
-    render(h(Comp), root)
-    expect(inner(root)).toBe('<div>0</div>')
-    updateFoo()
-    count.value++
-    await nextTick()
-    expect(inner(root)).toBe(
-      '<div>1</div><div>1_foo</div><div>2_foo</div><div>3_foo</div>',
-    )
-  })
-
   // A Fragment with `UNKEYED_FRAGMENT` flag will always patch its children,
   // so there's no need for tracking dynamicChildren.
   test('PatchFlags: PatchFlags.UNKEYED_FRAGMENT', async () => {
@@ -1351,4 +1294,62 @@ describe('renderer: optimized mode', () => {
     expect(inner(root)).toBe('<!--v-if-->')
     expect(beforeUnmountSpy).toHaveBeenCalledTimes(1)
   })
+
+  // #12411
+  test('handle patch stable fragment with non-reactive v-for source', async () => {
+    const count = ref(0)
+    const foo: any = []
+    function updateFoo() {
+      for (let n = 0; n < 3; n++) {
+        foo[n] = n + 1 + '_foo'
+      }
+    }
+    const Comp = {
+      setup() {
+        return () => {
+          // <div>{{ count }}</div>
+          // <div v-for='item in foo'>{{ item }}</div>
+          return (
+            openBlock(),
+            createElementBlock(
+              Fragment,
+              null,
+              [
+                createElementVNode(
+                  'div',
+                  null,
+                  toDisplayString(count.value),
+                  PatchFlags.TEXT,
+                ),
+                (openBlock(),
+                createElementBlock(
+                  Fragment,
+                  null,
+                  renderList(foo, item => {
+                    return createElementVNode(
+                      'div',
+                      null,
+                      toDisplayString(item),
+                      PatchFlags.TEXT,
+                    )
+                  }),
+                  PatchFlags.STABLE_FRAGMENT,
+                )),
+              ],
+              PatchFlags.STABLE_FRAGMENT,
+            )
+          )
+        }
+      },
+    }
+
+    render(h(Comp), root)
+    expect(inner(root)).toBe('<div>0</div>')
+    updateFoo()
+    count.value++
+    await nextTick()
+    expect(inner(root)).toBe(
+      '<div>1</div><div>1_foo</div><div>2_foo</div><div>3_foo</div>',
+    )
+  })
 })