fix(reactivity): should delete observe value (vuejs#597)

underfin · Jan 9, 2020 · 6368613 · 6368613
1 parent 8f616a8
commit 6368613
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 7 deletions.
diff --git a/packages/reactivity/__tests__/collections/Map.spec.ts b/packages/reactivity/__tests__/collections/Map.spec.ts
@@ -1,4 +1,4 @@
-import { reactive, effect, toRaw, isReactive } from '../../src'
+import { effect, isReactive, reactive, toRaw } from '../../src'
 
 describe('reactivity/collections', () => {
   describe('Map', () => {
@@ -26,6 +26,21 @@ describe('reactivity/collections', () => {
       expect(dummy).toBe(undefined)
     })
 
+    it('should observe mutations with observed value', () => {
+      let dummy
+      const value = reactive({})
+      const map = reactive(new Map())
+      effect(() => {
+        dummy = map.get('key')
+      })
+
+      expect(dummy).toBe(undefined)
+      map.set('key', value)
+      expect(dummy).toBe(value)
+      map.delete('key')
+      expect(dummy).toBe(undefined)
+    })
+
     it('should observe size mutations', () => {
       let dummy
       const map = reactive(new Map())

diff --git a/packages/reactivity/__tests__/collections/Set.spec.ts b/packages/reactivity/__tests__/collections/Set.spec.ts
@@ -1,4 +1,4 @@
-import { reactive, effect, isReactive, toRaw } from '../../src'
+import { effect, isReactive, reactive, toRaw } from '../../src'
 
 describe('reactivity/collections', () => {
   describe('Set', () => {
@@ -22,6 +22,19 @@ describe('reactivity/collections', () => {
       expect(dummy).toBe(false)
     })
 
+    it('should observe mutations with observed value', () => {
+      let dummy
+      const value = reactive({})
+      const set = reactive(new Set())
+      effect(() => (dummy = set.has(value)))
+
+      expect(dummy).toBe(false)
+      set.add(value)
+      expect(dummy).toBe(true)
+      set.delete(value)
+      expect(dummy).toBe(false)
+    })
+
     it('should observe for of iteration', () => {
       let dummy
       const set = reactive(new Set() as Set<number>)

diff --git a/packages/reactivity/__tests__/collections/WeakMap.spec.ts b/packages/reactivity/__tests__/collections/WeakMap.spec.ts
@@ -1,4 +1,4 @@
-import { reactive, effect, toRaw, isReactive } from '../../src'
+import { effect, isReactive, reactive, toRaw } from '../../src'
 
 describe('reactivity/collections', () => {
   describe('WeakMap', () => {
@@ -27,6 +27,22 @@ describe('reactivity/collections', () => {
       expect(dummy).toBe(undefined)
     })
 
+    it('should observe mutations with observed value', () => {
+      let dummy
+      const key = {}
+      const value = reactive({})
+      const map = reactive(new WeakMap())
+      effect(() => {
+        dummy = map.get(key)
+      })
+
+      expect(dummy).toBe(undefined)
+      map.set(key, value)
+      expect(dummy).toBe(value)
+      map.delete(key)
+      expect(dummy).toBe(undefined)
+    })
+
     it('should not observe custom property mutations', () => {
       let dummy
       const map: any = reactive(new WeakMap())

diff --git a/packages/reactivity/__tests__/collections/WeakSet.spec.ts b/packages/reactivity/__tests__/collections/WeakSet.spec.ts
@@ -1,4 +1,4 @@
-import { reactive, isReactive, effect, toRaw } from '../../src'
+import { effect, isReactive, reactive, toRaw } from '../../src'
 
 describe('reactivity/collections', () => {
   describe('WeakSet', () => {
@@ -23,6 +23,19 @@ describe('reactivity/collections', () => {
       expect(dummy).toBe(false)
     })
 
+    it('should observe mutations with observed value', () => {
+      let dummy
+      const value = reactive({})
+      const set = reactive(new WeakSet())
+      effect(() => (dummy = set.has(value)))
+
+      expect(dummy).toBe(false)
+      set.add(value)
+      expect(dummy).toBe(true)
+      set.delete(value)
+      expect(dummy).toBe(false)
+    })
+
     it('should not observe custom property mutations', () => {
       let dummy
       const set: any = reactive(new WeakSet())

diff --git a/packages/reactivity/src/collectionHandlers.ts b/packages/reactivity/src/collectionHandlers.ts
@@ -1,8 +1,8 @@
-import { toRaw, reactive, readonly } from './reactive'
-import { track, trigger, ITERATE_KEY } from './effect'
+import { reactive, readonly, toRaw } from './reactive'
+import { ITERATE_KEY, track, trigger } from './effect'
 import { TrackOpTypes, TriggerOpTypes } from './operations'
 import { LOCKED } from './lock'
-import { isObject, capitalize, hasOwn, hasChanged } from '@vue/shared'
+import { capitalize, hasChanged, hasOwn, isObject } from '@vue/shared'
 
 export type CollectionTypes = IterableCollections | WeakCollections
 
@@ -87,6 +87,7 @@ function set(this: MapTypes, key: unknown, value: unknown) {
 }
 
 function deleteEntry(this: CollectionTypes, key: unknown) {
+  key = toRaw(key)
   const target = toRaw(this)
   const proto = getProto(target)
   const hadKey = proto.has.call(target, key)