fix(KeepAlive): when exclude prop change, it should prune cache that …

…not matched (#2111)
vuejs · Sep 15, 2020 · 98cc1f9 · 98cc1f9
1 parent d4bf9bc
commit 98cc1f9
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 3 deletions.
diff --git a/packages/runtime-core/__tests__/components/KeepAlive.spec.ts b/packages/runtime-core/__tests__/components/KeepAlive.spec.ts
@@ -494,7 +494,25 @@ describe('KeepAlive', () => {
  return { viewRef, includeRef }
  }
 
- test('on include/exclude change', async () => {
+ function setupExclude() {
+ const viewRef = ref('one')
+ const excludeRef = ref('')
+ const App = {
+ render() {
+ return h(
+ KeepAlive,
+ {
+ exclude: excludeRef.value
+ },
+ () => h(views[viewRef.value])
+ )
+ }
+ }
+ render(h(App), root)
+ return { viewRef, excludeRef }
+ }
+
+ test('on include change', async () => {
  const { viewRef, includeRef } = setup()
 
  viewRef.value = 'two'
@@ -513,7 +531,26 @@ describe('KeepAlive', () => {
  assertHookCalls(two, [1, 1, 1, 1, 0])
  })
 
- test('on include/exclude change + view switch', async () => {
+ test('on exclude change', async () => {
+ const { viewRef, excludeRef } = setupExclude()
+
+ viewRef.value = 'two'
+ await nextTick()
+ assertHookCalls(one, [1, 1, 1, 1, 0])
+ assertHookCalls(two, [1, 1, 1, 0, 0])
+
+ excludeRef.value = 'one'
+ await nextTick()
+ assertHookCalls(one, [1, 1, 1, 1, 1])
+ assertHookCalls(two, [1, 1, 1, 0, 0])
+
+ viewRef.value = 'one'
+ await nextTick()
+ assertHookCalls(one, [2, 2, 1, 1, 1])
+ assertHookCalls(two, [1, 1, 1, 1, 0])
+ })
+
+ test('on include change + view switch', async () => {
  const { viewRef, includeRef } = setup()
 
  viewRef.value = 'two'
@@ -529,6 +566,22 @@ describe('KeepAlive', () => {
  assertHookCalls(two, [1, 1, 1, 1, 1])
  })
 
+ test('on exclude change + view switch', async () => {
+ const { viewRef, excludeRef } = setupExclude()
+
+ viewRef.value = 'two'
+ await nextTick()
+ assertHookCalls(one, [1, 1, 1, 1, 0])
+ assertHookCalls(two, [1, 1, 1, 0, 0])
+
+ excludeRef.value = 'two'
+ viewRef.value = 'one'
+ await nextTick()
+ assertHookCalls(one, [1, 1, 2, 1, 0])
+ // two should be pruned
+ assertHookCalls(two, [1, 1, 1, 1, 1])
+ })
+
  test('should not prune current active instance', async () => {
  const { viewRef, includeRef } = setup()
 

diff --git a/packages/runtime-core/src/components/KeepAlive.ts b/packages/runtime-core/src/components/KeepAlive.ts
@@ -175,7 +175,7 @@ const KeepAliveImpl = {
  () => [props.include, props.exclude],
  ([include, exclude]) => {
  include && pruneCache(name => matches(include, name))
- exclude && pruneCache(name => matches(exclude, name))
+ exclude && pruneCache(name => !matches(exclude, name))
  }
  )