fix(hmr): avoid errors when updating KeepAlive slot component (vuejs#…

…7042)

packages/runtime-core/__tests__/hmr.spec.ts

@@ -151,6 +151,44 @@ describe('hot module replacement', () => {
     expect(mountSpy).toHaveBeenCalledTimes(1)
   })
 
+  test('reload KeepAlive slot', async () => {
+    const root = nodeOps.createElement('div')
+    const childId = 'test-child-keep-alive'
+    const unmountSpy = jest.fn()
+    const mountSpy = jest.fn()
+
+    const Child: ComponentOptions = {
+      __hmrId: childId,
+      data() {
+        return { count: 0 }
+      },
+      unmounted: unmountSpy,
+      render: compileToFunction(`<div>{{ count }}</div>`)
+    }
+    createRecord(childId, Child)
+
+    const Parent: ComponentOptions = {
+      components: { Child },
+      render: compileToFunction(`<KeepAlive><Child/></KeepAlive>`)
+    }
+
+    render(h(Parent), root)
+    expect(serializeInner(root)).toBe(`<div>0</div>`)
+
+    reload(childId, {
+      __hmrId: childId,
+      data() {
+        return { count: 1 }
+      },
+      mounted: mountSpy,
+      render: compileToFunction(`<div>{{ count }}</div>`)
+    })
+    await nextTick()
+    expect(serializeInner(root)).toBe(`<div>1</div>`)
+    expect(unmountSpy).toHaveBeenCalledTimes(1)
+    expect(mountSpy).toHaveBeenCalledTimes(1)
+  })
+
   test('reload class component', async () => {
     const root = nodeOps.createElement('div')
     const childId = 'test4-child'

packages/runtime-core/src/vnode.ts

@@ -352,6 +352,14 @@ export function isSameVNodeType(n1: VNode, n2: VNode): boolean {
     n2.shapeFlag & ShapeFlags.COMPONENT &&
     hmrDirtyComponents.has(n2.type as ConcreteComponent)
   ) {
+    // #7042, ensure the vnode being unmounted during HMR
+    if (n1.shapeFlag & ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE) {
+      n1.shapeFlag -= ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE
+    }
+    // #7042, ensure the vnode being mounted as fresh during HMR
+    if (n2.shapeFlag & ShapeFlags.COMPONENT_KEPT_ALIVE) {
+      n2.shapeFlag -= ShapeFlags.COMPONENT_KEPT_ALIVE
+    }
     // HMR only: if the component has been hot-updated, force a reload.
     return false
   }