fix(reactivity): account for NaN in value change checks (#361)

packages/reactivity/__tests__/collections/Map.spec.ts

@@ -311,5 +311,13 @@ describe('reactivity/collections', () => {
       map.get(key)!.foo++
       expect(dummy).toBe(2)
     })
+
+    it('should not be trigger when the value and the old value both are NaN', () => {
+      const map = reactive(new Map([['foo', NaN]]))
+      const mapSpy = jest.fn(() => map.get('foo'))
+      effect(mapSpy)
+      map.set('foo', NaN)
+      expect(mapSpy).toHaveBeenCalledTimes(1)
+    })
   })
 })

packages/reactivity/__tests__/collections/WeakMap.spec.ts

@@ -107,5 +107,15 @@ describe('reactivity/collections', () => {
       observed.get(key).a = 2
       expect(dummy).toBe(2)
     })
+
+    it('should not be trigger when the value and the old value both are NaN', () => {
+      const map = new WeakMap()
+      const key = {}
+      map.set(key, NaN)
+      const mapSpy = jest.fn(() => map.get(key))
+      effect(mapSpy)
+      map.set(key, NaN)
+      expect(mapSpy).toHaveBeenCalledTimes(1)
+    })
   })
 })

packages/reactivity/__tests__/effect.spec.ts

@@ -691,4 +691,14 @@ describe('reactivity/effect', () => {
     obj.foo = { prop: 1 }
     expect(dummy).toBe(1)
   })
+
+  it('should not be trigger when the value and the old value both are NaN', () => {
+    const obj = reactive({
+      foo: NaN
+    })
+    const fnSpy = jest.fn(() => obj.foo)
+    effect(fnSpy)
+    obj.foo = NaN
+    expect(fnSpy).toHaveBeenCalledTimes(1)
+  })
 })

packages/reactivity/src/baseHandlers.ts

@@ -2,7 +2,7 @@ import { reactive, readonly, toRaw } from './reactive'
 import { OperationTypes } from './operations'
 import { track, trigger } from './effect'
 import { LOCKED } from './lock'
-import { isObject, hasOwn, isSymbol } from '@vue/shared'
+import { isObject, hasOwn, isSymbol, hasChanged } from '@vue/shared'
 import { isRef } from './ref'
 
 const builtInSymbols = new Set(
@@ -52,13 +52,13 @@ function set(
       const extraInfo = { oldValue, newValue: value }
       if (!hadKey) {
         trigger(target, OperationTypes.ADD, key, extraInfo)
-      } else if (value !== oldValue) {
+      } else if (hasChanged(value, oldValue)) {
         trigger(target, OperationTypes.SET, key, extraInfo)
       }
     } else {
       if (!hadKey) {
         trigger(target, OperationTypes.ADD, key)
-      } else if (value !== oldValue) {
+      } else if (hasChanged(value, oldValue)) {
         trigger(target, OperationTypes.SET, key)
       }
     }

packages/reactivity/src/collectionHandlers.ts

@@ -2,7 +2,7 @@ import { toRaw, reactive, readonly } from './reactive'
 import { track, trigger } from './effect'
 import { OperationTypes } from './operations'
 import { LOCKED } from './lock'
-import { isObject, capitalize, hasOwn } from '@vue/shared'
+import { isObject, capitalize, hasOwn, hasChanged } from '@vue/shared'
 
 export type CollectionTypes = IterableCollections | WeakCollections
 
@@ -73,13 +73,13 @@ function set(this: MapTypes, key: unknown, value: unknown) {
     const extraInfo = { oldValue, newValue: value }
     if (!hadKey) {
       trigger(target, OperationTypes.ADD, key, extraInfo)
-    } else if (value !== oldValue) {
+    } else if (hasChanged(value, oldValue)) {
       trigger(target, OperationTypes.SET, key, extraInfo)
     }
   } else {
     if (!hadKey) {
       trigger(target, OperationTypes.ADD, key)
-    } else if (value !== oldValue) {
+    } else if (hasChanged(value, oldValue)) {
       trigger(target, OperationTypes.SET, key)
     }
   }