fix(keep-alive): handle "0" as cache key (#1622)

fix #1621
vuejs · Jul 19, 2020 · 2deb0c7 · 2deb0c7
1 parent 8facaef
commit 2deb0c7
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 2 deletions.
diff --git a/packages/runtime-core/src/components/KeepAlive.ts b/packages/runtime-core/src/components/KeepAlive.ts
@@ -182,7 +182,8 @@ const KeepAliveImpl = {
     // cache sub tree in beforeMount/Update (i.e. right after the render)
     let pendingCacheKey: CacheKey | null = null
     const cacheSubtree = () => {
-      if (pendingCacheKey) {
+      // fix #1621, the pendingCacheKey could be 0
+      if (pendingCacheKey != null) {
         cache.set(pendingCacheKey, instance.subTree)
       }
     }

diff --git a/packages/vue/__tests__/index.spec.ts b/packages/vue/__tests__/index.spec.ts
@@ -1,4 +1,4 @@
-import { createApp } from '../src'
+import { createApp, ref, nextTick } from '../src'
 import { mockWarn } from '@vue/shared'
 
 describe('compiler + runtime integration', () => {
@@ -18,6 +18,62 @@ describe('compiler + runtime integration', () => {
     expect(container.innerHTML).toBe(`0`)
   })
 
+  it('keep-alive with compiler + runtime integration', async () => {
+    const container = document.createElement('div')
+    const one = {
+      name: 'one',
+      template: 'one',
+      created: jest.fn(),
+      mounted: jest.fn(),
+      activated: jest.fn(),
+      deactivated: jest.fn(),
+      destroyed: jest.fn()
+    }
+
+    const toggle = ref(true)
+
+    const App = {
+      template: `
+        <keep-alive>
+          <one v-if="toggle"></one>
+        </keep-alive>
+      `,
+      data() {
+        return {
+          toggle
+        }
+      },
+      components: {
+        One: one
+      }
+    }
+    createApp(App).mount(container)
+    expect(container.innerHTML).toBe(`one`)
+    expect(one.created).toHaveBeenCalledTimes(1)
+    expect(one.mounted).toHaveBeenCalledTimes(1)
+    expect(one.activated).toHaveBeenCalledTimes(1)
+    expect(one.deactivated).toHaveBeenCalledTimes(0)
+    expect(one.destroyed).toHaveBeenCalledTimes(0)
+
+    toggle.value = false;
+    await nextTick()
+    expect(container.innerHTML).toBe(`<!--v-if-->`)
+    expect(one.created).toHaveBeenCalledTimes(1)
+    expect(one.mounted).toHaveBeenCalledTimes(1)
+    expect(one.activated).toHaveBeenCalledTimes(1)
+    expect(one.deactivated).toHaveBeenCalledTimes(1)
+    expect(one.destroyed).toHaveBeenCalledTimes(0)
+
+    toggle.value = true;
+    await nextTick()
+    expect(container.innerHTML).toBe(`one`)
+    expect(one.created).toHaveBeenCalledTimes(1)
+    expect(one.mounted).toHaveBeenCalledTimes(1)
+    expect(one.activated).toHaveBeenCalledTimes(2)
+    expect(one.deactivated).toHaveBeenCalledTimes(1)
+    expect(one.destroyed).toHaveBeenCalledTimes(0)
+  })
+
   it('should support runtime template via CSS ID selector', () => {
     const container = document.createElement('div')
     const template = document.createElement('div')