fix(reactivity): track hasOwnProperty

yyx990803 · yyx990803 · commit 588bd44f036b · 2022-11-14T17:17:35.000+08:00
fix #2619 close #2621
diff --git a/packages/reactivity/__tests__/effect.spec.ts b/packages/reactivity/__tests__/effect.spec.ts
@@ -964,5 +964,31 @@ describe('reactivity/effect', () =>{
 m.set(key, 2)
 expect(fnSpy).toHaveBeenCalledTimes(2)
 })
+
+ test('should track hasOwnProperty', () =>{
+ const obj: any = reactive({})
+ let has = false
+ const fnSpy = jest.fn()
+
+ effect(() =>{
+ fnSpy()
+ has = obj.hasOwnProperty('foo')
+ })
+ expect(fnSpy).toHaveBeenCalledTimes(1)
+ expect(has).toBe(false)
+
+ obj.foo = 1
+ expect(fnSpy).toHaveBeenCalledTimes(2)
+ expect(has).toBe(true)
+
+ delete obj.foo
+ expect(fnSpy).toHaveBeenCalledTimes(3)
+ expect(has).toBe(false)
+
+ // should not trigger on unrelated key
+ obj.bar = 2
+ expect(fnSpy).toHaveBeenCalledTimes(3)
+ expect(has).toBe(false)
+ })
 })
 })
diff --git a/packages/reactivity/src/baseHandlers.ts b/packages/reactivity/src/baseHandlers.ts
@@ -85,6 +85,13 @@ function createArrayInstrumentations(){
 return instrumentations
 }
 
+function hasOwnProperty(key: string){
+ // @ts-ignore
+ const obj = toRaw(this)
+ track(obj, TrackOpTypes.HAS, key)
+ return obj.hasOwnProperty(key)
+}
+
 function createGetter(isReadonly = false, shallow = false){
 return function get(target: Target, key: string | symbol, receiver: object){
 if (key === ReactiveFlags.IS_REACTIVE){
@@ -110,8 +117,13 @@ function createGetter(isReadonly = false, shallow = false){
 
 const targetIsArray = isArray(target)
 
- if (!isReadonly && targetIsArray && hasOwn(arrayInstrumentations, key)){
- return Reflect.get(arrayInstrumentations, key, receiver)
+ if (!isReadonly){
+ if (targetIsArray && hasOwn(arrayInstrumentations, key)){
+ return Reflect.get(arrayInstrumentations, key, receiver)
+ }
+ if (key === 'hasOwnProperty'){
+ return hasOwnProperty
+ }
 }
 
 const res = Reflect.get(target, key, receiver)

-Original file line number
+Diff line change
 m.set(key,2)
 expect(fnSpy).toHaveBeenCalledTimes(2)
 })
++
 +test('should track hasOwnProperty',()=>{
 +constobj: any=reactive({})
 +lethas=false
 +constfnSpy=jest.fn()
++
 +effect(()=>{
 +fnSpy()
 +has=obj.hasOwnProperty('foo')
 +})
 +expect(fnSpy).toHaveBeenCalledTimes(1)
 +expect(has).toBe(false)
++
 +obj.foo=1
 +expect(fnSpy).toHaveBeenCalledTimes(2)
 +expect(has).toBe(true)
++
 +deleteobj.foo
 +expect(fnSpy).toHaveBeenCalledTimes(3)
 +expect(has).toBe(false)
++
 +// should not trigger on unrelated key
 +obj.bar=2
 +expect(fnSpy).toHaveBeenCalledTimes(3)
 +expect(has).toBe(false)
 +})
 })
 })
-Original file line number
+Diff line change
 returninstrumentations
+}
 +functionhasOwnProperty(key: string){
 +// @ts-ignore
 +constobj=toRaw(this)
 +track(obj,TrackOpTypes.HAS,key)
 +returnobj.hasOwnProperty(key)
 +}
++
 functioncreateGetter(isReadonly=false,shallow=false){
 returnfunctionget(target: Target,key: string|symbol,receiver: object){
 if(key===ReactiveFlags.IS_REACTIVE){
 consttargetIsArray=isArray(target)
 -if(!isReadonly&&targetIsArray&&hasOwn(arrayInstrumentations,key)){
 -returnReflect.get(arrayInstrumentations,key,receiver)
 +if(!isReadonly){
 +if(targetIsArray&&hasOwn(arrayInstrumentations,key)){
 +returnReflect.get(arrayInstrumentations,key,receiver)
 +}
 +if(key==='hasOwnProperty'){
 +returnhasOwnProperty
 +}
+}
 constres=Reflect.get(target,key,receiver)