Skip to content
Permalink
Browse files
fix(hmr/keep-alive): fix error in reload component (#7049)
fix #7042
  • Loading branch information
zhangzhonghe committed Nov 10, 2022
1 parent 0594400 commit a54bff2c9c8e1d908b4a0f3826ac715c9a35e68c
Show file tree
Hide file tree
Showing 3 changed files with 76 additions and 3 deletions.
@@ -151,6 +151,73 @@ describe('hot module replacement', () => {
expect(mountSpy).toHaveBeenCalledTimes(1)
})

// #7042
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 activeSpy = jest.fn()
const deactiveSpy = 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 },
data() {
return { toggle: true }
},
render: compileToFunction(
`<button @click="toggle = !toggle"></button><KeepAlive><Child v-if="toggle" /></KeepAlive>`
)
}

render(h(Parent), root)
expect(serializeInner(root)).toBe(`<button></button><div>0</div>`)

reload(childId, {
__hmrId: childId,
data() {
return { count: 1 }
},
mounted: mountSpy,
unmounted: unmountSpy,
activated: activeSpy,
deactivated: deactiveSpy,
render: compileToFunction(`<div>{{ count }}</div>`)
})
await nextTick()
expect(serializeInner(root)).toBe(`<button></button><div>1</div>`)
expect(unmountSpy).toHaveBeenCalledTimes(1)
expect(mountSpy).toHaveBeenCalledTimes(1)
expect(activeSpy).toHaveBeenCalledTimes(1)
expect(deactiveSpy).toHaveBeenCalledTimes(0)

// should not unmount when toggling
triggerEvent(root.children[1] as TestElement, 'click')
await nextTick()
expect(unmountSpy).toHaveBeenCalledTimes(1)
expect(mountSpy).toHaveBeenCalledTimes(1)
expect(activeSpy).toHaveBeenCalledTimes(1)
expect(deactiveSpy).toHaveBeenCalledTimes(1)

// should not mount when toggling
triggerEvent(root.children[1] as TestElement, 'click')
await nextTick()
expect(unmountSpy).toHaveBeenCalledTimes(1)
expect(mountSpy).toHaveBeenCalledTimes(1)
expect(activeSpy).toHaveBeenCalledTimes(2)
expect(deactiveSpy).toHaveBeenCalledTimes(1)
})

test('reload class component', async () => {
const root = nodeOps.createElement('div')
const childId = 'test4-child'
@@ -31,7 +31,6 @@ import {
invokeArrayFns
} from '@vue/shared'
import { watch } from '../apiWatch'
import { hmrDirtyComponents } from '../hmr'
import {
RendererInternals,
queuePostRenderEffect,
@@ -281,8 +280,7 @@ const KeepAliveImpl: ComponentOptions = {

if (
(include && (!name || !matches(include, name))) ||
(exclude && name && matches(exclude, name)) ||
(__DEV__ && hmrDirtyComponents.has(comp))
(exclude && name && matches(exclude, name))
) {
current = vnode
return rawVNode
@@ -357,6 +357,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
}

0 comments on commit a54bff2

Please sign in to comment.