diff --git a/book/impls/10_minimum_example/030_reactive_system/packages/reactivity/baseHandler.ts b/book/impls/10_minimum_example/030_reactive_system/packages/reactivity/baseHandler.ts index fabb07ff..6b790e03 100644 --- a/book/impls/10_minimum_example/030_reactive_system/packages/reactivity/baseHandler.ts +++ b/book/impls/10_minimum_example/030_reactive_system/packages/reactivity/baseHandler.ts @@ -14,8 +14,14 @@ export const mutableHandlers: ProxyHandler = { }, set(target: object, key: string | symbol, value: unknown, receiver: object) { + let oldValue = (target as any)[key]; Reflect.set(target, key, value, receiver); - trigger(target, key); + if (hasChanged(value, oldValue)) { + trigger(target, key); + } return true; }, }; + +const hasChanged = (value: any, oldValue: any): boolean => + !Object.is(value, oldValue); diff --git a/book/impls/10_minimum_example/040_vdom_system/packages/reactivity/baseHandler.ts b/book/impls/10_minimum_example/040_vdom_system/packages/reactivity/baseHandler.ts index fabb07ff..6b790e03 100644 --- a/book/impls/10_minimum_example/040_vdom_system/packages/reactivity/baseHandler.ts +++ b/book/impls/10_minimum_example/040_vdom_system/packages/reactivity/baseHandler.ts @@ -14,8 +14,14 @@ export const mutableHandlers: ProxyHandler = { }, set(target: object, key: string | symbol, value: unknown, receiver: object) { + let oldValue = (target as any)[key]; Reflect.set(target, key, value, receiver); - trigger(target, key); + if (hasChanged(value, oldValue)) { + trigger(target, key); + } return true; }, }; + +const hasChanged = (value: any, oldValue: any): boolean => + !Object.is(value, oldValue); diff --git a/book/impls/10_minimum_example/050_component_system/packages/reactivity/baseHandler.ts b/book/impls/10_minimum_example/050_component_system/packages/reactivity/baseHandler.ts index fabb07ff..6b790e03 100644 --- a/book/impls/10_minimum_example/050_component_system/packages/reactivity/baseHandler.ts +++ b/book/impls/10_minimum_example/050_component_system/packages/reactivity/baseHandler.ts @@ -14,8 +14,14 @@ export const mutableHandlers: ProxyHandler = { }, set(target: object, key: string | symbol, value: unknown, receiver: object) { + let oldValue = (target as any)[key]; Reflect.set(target, key, value, receiver); - trigger(target, key); + if (hasChanged(value, oldValue)) { + trigger(target, key); + } return true; }, }; + +const hasChanged = (value: any, oldValue: any): boolean => + !Object.is(value, oldValue); diff --git a/book/impls/10_minimum_example/050_component_system2/packages/reactivity/baseHandler.ts b/book/impls/10_minimum_example/050_component_system2/packages/reactivity/baseHandler.ts index fabb07ff..6b790e03 100644 --- a/book/impls/10_minimum_example/050_component_system2/packages/reactivity/baseHandler.ts +++ b/book/impls/10_minimum_example/050_component_system2/packages/reactivity/baseHandler.ts @@ -14,8 +14,14 @@ export const mutableHandlers: ProxyHandler = { }, set(target: object, key: string | symbol, value: unknown, receiver: object) { + let oldValue = (target as any)[key]; Reflect.set(target, key, value, receiver); - trigger(target, key); + if (hasChanged(value, oldValue)) { + trigger(target, key); + } return true; }, }; + +const hasChanged = (value: any, oldValue: any): boolean => + !Object.is(value, oldValue); diff --git a/book/impls/10_minimum_example/050_component_system3/packages/reactivity/baseHandler.ts b/book/impls/10_minimum_example/050_component_system3/packages/reactivity/baseHandler.ts index fabb07ff..6b790e03 100644 --- a/book/impls/10_minimum_example/050_component_system3/packages/reactivity/baseHandler.ts +++ b/book/impls/10_minimum_example/050_component_system3/packages/reactivity/baseHandler.ts @@ -14,8 +14,14 @@ export const mutableHandlers: ProxyHandler = { }, set(target: object, key: string | symbol, value: unknown, receiver: object) { + let oldValue = (target as any)[key]; Reflect.set(target, key, value, receiver); - trigger(target, key); + if (hasChanged(value, oldValue)) { + trigger(target, key); + } return true; }, }; + +const hasChanged = (value: any, oldValue: any): boolean => + !Object.is(value, oldValue); diff --git a/book/impls/10_minimum_example/060_template_compiler/packages/reactivity/baseHandler.ts b/book/impls/10_minimum_example/060_template_compiler/packages/reactivity/baseHandler.ts index fabb07ff..6b790e03 100644 --- a/book/impls/10_minimum_example/060_template_compiler/packages/reactivity/baseHandler.ts +++ b/book/impls/10_minimum_example/060_template_compiler/packages/reactivity/baseHandler.ts @@ -14,8 +14,14 @@ export const mutableHandlers: ProxyHandler = { }, set(target: object, key: string | symbol, value: unknown, receiver: object) { + let oldValue = (target as any)[key]; Reflect.set(target, key, value, receiver); - trigger(target, key); + if (hasChanged(value, oldValue)) { + trigger(target, key); + } return true; }, }; + +const hasChanged = (value: any, oldValue: any): boolean => + !Object.is(value, oldValue); diff --git a/book/impls/10_minimum_example/060_template_compiler2/packages/reactivity/baseHandler.ts b/book/impls/10_minimum_example/060_template_compiler2/packages/reactivity/baseHandler.ts index fabb07ff..6b790e03 100644 --- a/book/impls/10_minimum_example/060_template_compiler2/packages/reactivity/baseHandler.ts +++ b/book/impls/10_minimum_example/060_template_compiler2/packages/reactivity/baseHandler.ts @@ -14,8 +14,14 @@ export const mutableHandlers: ProxyHandler = { }, set(target: object, key: string | symbol, value: unknown, receiver: object) { + let oldValue = (target as any)[key]; Reflect.set(target, key, value, receiver); - trigger(target, key); + if (hasChanged(value, oldValue)) { + trigger(target, key); + } return true; }, }; + +const hasChanged = (value: any, oldValue: any): boolean => + !Object.is(value, oldValue); diff --git a/book/impls/10_minimum_example/060_template_compiler3/packages/reactivity/baseHandler.ts b/book/impls/10_minimum_example/060_template_compiler3/packages/reactivity/baseHandler.ts index fabb07ff..6b790e03 100644 --- a/book/impls/10_minimum_example/060_template_compiler3/packages/reactivity/baseHandler.ts +++ b/book/impls/10_minimum_example/060_template_compiler3/packages/reactivity/baseHandler.ts @@ -14,8 +14,14 @@ export const mutableHandlers: ProxyHandler = { }, set(target: object, key: string | symbol, value: unknown, receiver: object) { + let oldValue = (target as any)[key]; Reflect.set(target, key, value, receiver); - trigger(target, key); + if (hasChanged(value, oldValue)) { + trigger(target, key); + } return true; }, }; + +const hasChanged = (value: any, oldValue: any): boolean => + !Object.is(value, oldValue); diff --git a/book/impls/10_minimum_example/070_sfc_compiler/packages/reactivity/baseHandler.ts b/book/impls/10_minimum_example/070_sfc_compiler/packages/reactivity/baseHandler.ts index fabb07ff..6b790e03 100644 --- a/book/impls/10_minimum_example/070_sfc_compiler/packages/reactivity/baseHandler.ts +++ b/book/impls/10_minimum_example/070_sfc_compiler/packages/reactivity/baseHandler.ts @@ -14,8 +14,14 @@ export const mutableHandlers: ProxyHandler = { }, set(target: object, key: string | symbol, value: unknown, receiver: object) { + let oldValue = (target as any)[key]; Reflect.set(target, key, value, receiver); - trigger(target, key); + if (hasChanged(value, oldValue)) { + trigger(target, key); + } return true; }, }; + +const hasChanged = (value: any, oldValue: any): boolean => + !Object.is(value, oldValue); diff --git a/book/impls/10_minimum_example/070_sfc_compiler2/packages/reactivity/baseHandler.ts b/book/impls/10_minimum_example/070_sfc_compiler2/packages/reactivity/baseHandler.ts index fabb07ff..6b790e03 100644 --- a/book/impls/10_minimum_example/070_sfc_compiler2/packages/reactivity/baseHandler.ts +++ b/book/impls/10_minimum_example/070_sfc_compiler2/packages/reactivity/baseHandler.ts @@ -14,8 +14,14 @@ export const mutableHandlers: ProxyHandler = { }, set(target: object, key: string | symbol, value: unknown, receiver: object) { + let oldValue = (target as any)[key]; Reflect.set(target, key, value, receiver); - trigger(target, key); + if (hasChanged(value, oldValue)) { + trigger(target, key); + } return true; }, }; + +const hasChanged = (value: any, oldValue: any): boolean => + !Object.is(value, oldValue); diff --git a/book/impls/10_minimum_example/070_sfc_compiler3/packages/reactivity/baseHandler.ts b/book/impls/10_minimum_example/070_sfc_compiler3/packages/reactivity/baseHandler.ts index fabb07ff..6b790e03 100644 --- a/book/impls/10_minimum_example/070_sfc_compiler3/packages/reactivity/baseHandler.ts +++ b/book/impls/10_minimum_example/070_sfc_compiler3/packages/reactivity/baseHandler.ts @@ -14,8 +14,14 @@ export const mutableHandlers: ProxyHandler = { }, set(target: object, key: string | symbol, value: unknown, receiver: object) { + let oldValue = (target as any)[key]; Reflect.set(target, key, value, receiver); - trigger(target, key); + if (hasChanged(value, oldValue)) { + trigger(target, key); + } return true; }, }; + +const hasChanged = (value: any, oldValue: any): boolean => + !Object.is(value, oldValue); diff --git a/book/impls/10_minimum_example/070_sfc_compiler4/packages/reactivity/baseHandler.ts b/book/impls/10_minimum_example/070_sfc_compiler4/packages/reactivity/baseHandler.ts index fabb07ff..6b790e03 100644 --- a/book/impls/10_minimum_example/070_sfc_compiler4/packages/reactivity/baseHandler.ts +++ b/book/impls/10_minimum_example/070_sfc_compiler4/packages/reactivity/baseHandler.ts @@ -14,8 +14,14 @@ export const mutableHandlers: ProxyHandler = { }, set(target: object, key: string | symbol, value: unknown, receiver: object) { + let oldValue = (target as any)[key]; Reflect.set(target, key, value, receiver); - trigger(target, key); + if (hasChanged(value, oldValue)) { + trigger(target, key); + } return true; }, }; + +const hasChanged = (value: any, oldValue: any): boolean => + !Object.is(value, oldValue); diff --git a/book/impls/20_basic_virtual_dom/010_patch_keyed_children/packages/reactivity/baseHandler.ts b/book/impls/20_basic_virtual_dom/010_patch_keyed_children/packages/reactivity/baseHandler.ts index fabb07ff..6b790e03 100644 --- a/book/impls/20_basic_virtual_dom/010_patch_keyed_children/packages/reactivity/baseHandler.ts +++ b/book/impls/20_basic_virtual_dom/010_patch_keyed_children/packages/reactivity/baseHandler.ts @@ -14,8 +14,14 @@ export const mutableHandlers: ProxyHandler = { }, set(target: object, key: string | symbol, value: unknown, receiver: object) { + let oldValue = (target as any)[key]; Reflect.set(target, key, value, receiver); - trigger(target, key); + if (hasChanged(value, oldValue)) { + trigger(target, key); + } return true; }, }; + +const hasChanged = (value: any, oldValue: any): boolean => + !Object.is(value, oldValue); diff --git a/book/impls/20_basic_virtual_dom/020_bit_flags/packages/reactivity/baseHandler.ts b/book/impls/20_basic_virtual_dom/020_bit_flags/packages/reactivity/baseHandler.ts index b5cb5d63..a633f2e4 100644 --- a/book/impls/20_basic_virtual_dom/020_bit_flags/packages/reactivity/baseHandler.ts +++ b/book/impls/20_basic_virtual_dom/020_bit_flags/packages/reactivity/baseHandler.ts @@ -15,8 +15,14 @@ export const mutableHandlers: ProxyHandler = { }, set(target: object, key: string | symbol, value: unknown, receiver: object) { + let oldValue = (target as any)[key]; Reflect.set(target, key, value, receiver); - trigger(target, key); + if (hasChanged(value, oldValue)) { + trigger(target, key); + } return true; }, }; + +const hasChanged = (value: any, oldValue: any): boolean => + !Object.is(value, oldValue); diff --git a/book/impls/20_basic_virtual_dom/040_scheduler/packages/reactivity/baseHandler.ts b/book/impls/20_basic_virtual_dom/040_scheduler/packages/reactivity/baseHandler.ts index b5cb5d63..a633f2e4 100644 --- a/book/impls/20_basic_virtual_dom/040_scheduler/packages/reactivity/baseHandler.ts +++ b/book/impls/20_basic_virtual_dom/040_scheduler/packages/reactivity/baseHandler.ts @@ -15,8 +15,14 @@ export const mutableHandlers: ProxyHandler = { }, set(target: object, key: string | symbol, value: unknown, receiver: object) { + let oldValue = (target as any)[key]; Reflect.set(target, key, value, receiver); - trigger(target, key); + if (hasChanged(value, oldValue)) { + trigger(target, key); + } return true; }, }; + +const hasChanged = (value: any, oldValue: any): boolean => + !Object.is(value, oldValue); diff --git a/book/impls/20_basic_virtual_dom/050_next_tick/packages/reactivity/baseHandler.ts b/book/impls/20_basic_virtual_dom/050_next_tick/packages/reactivity/baseHandler.ts index b5cb5d63..a633f2e4 100644 --- a/book/impls/20_basic_virtual_dom/050_next_tick/packages/reactivity/baseHandler.ts +++ b/book/impls/20_basic_virtual_dom/050_next_tick/packages/reactivity/baseHandler.ts @@ -15,8 +15,14 @@ export const mutableHandlers: ProxyHandler = { }, set(target: object, key: string | symbol, value: unknown, receiver: object) { + let oldValue = (target as any)[key]; Reflect.set(target, key, value, receiver); - trigger(target, key); + if (hasChanged(value, oldValue)) { + trigger(target, key); + } return true; }, }; + +const hasChanged = (value: any, oldValue: any): boolean => + !Object.is(value, oldValue); diff --git a/book/impls/20_basic_virtual_dom/060_other_props/packages/reactivity/baseHandler.ts b/book/impls/20_basic_virtual_dom/060_other_props/packages/reactivity/baseHandler.ts index b5cb5d63..a633f2e4 100644 --- a/book/impls/20_basic_virtual_dom/060_other_props/packages/reactivity/baseHandler.ts +++ b/book/impls/20_basic_virtual_dom/060_other_props/packages/reactivity/baseHandler.ts @@ -15,8 +15,14 @@ export const mutableHandlers: ProxyHandler = { }, set(target: object, key: string | symbol, value: unknown, receiver: object) { + let oldValue = (target as any)[key]; Reflect.set(target, key, value, receiver); - trigger(target, key); + if (hasChanged(value, oldValue)) { + trigger(target, key); + } return true; }, }; + +const hasChanged = (value: any, oldValue: any): boolean => + !Object.is(value, oldValue); diff --git a/book/impls/30_basic_reactivity_system/010_ref/packages/reactivity/baseHandler.ts b/book/impls/30_basic_reactivity_system/010_ref/packages/reactivity/baseHandler.ts index b5cb5d63..a633f2e4 100644 --- a/book/impls/30_basic_reactivity_system/010_ref/packages/reactivity/baseHandler.ts +++ b/book/impls/30_basic_reactivity_system/010_ref/packages/reactivity/baseHandler.ts @@ -15,8 +15,14 @@ export const mutableHandlers: ProxyHandler = { }, set(target: object, key: string | symbol, value: unknown, receiver: object) { + let oldValue = (target as any)[key]; Reflect.set(target, key, value, receiver); - trigger(target, key); + if (hasChanged(value, oldValue)) { + trigger(target, key); + } return true; }, }; + +const hasChanged = (value: any, oldValue: any): boolean => + !Object.is(value, oldValue); diff --git a/book/impls/30_basic_reactivity_system/020_shallow_ref/packages/reactivity/baseHandler.ts b/book/impls/30_basic_reactivity_system/020_shallow_ref/packages/reactivity/baseHandler.ts index b5cb5d63..a633f2e4 100644 --- a/book/impls/30_basic_reactivity_system/020_shallow_ref/packages/reactivity/baseHandler.ts +++ b/book/impls/30_basic_reactivity_system/020_shallow_ref/packages/reactivity/baseHandler.ts @@ -15,8 +15,14 @@ export const mutableHandlers: ProxyHandler = { }, set(target: object, key: string | symbol, value: unknown, receiver: object) { + let oldValue = (target as any)[key]; Reflect.set(target, key, value, receiver); - trigger(target, key); + if (hasChanged(value, oldValue)) { + trigger(target, key); + } return true; }, }; + +const hasChanged = (value: any, oldValue: any): boolean => + !Object.is(value, oldValue); diff --git a/book/impls/30_basic_reactivity_system/030_to_ref/packages/reactivity/baseHandler.ts b/book/impls/30_basic_reactivity_system/030_to_ref/packages/reactivity/baseHandler.ts index b5cb5d63..a633f2e4 100644 --- a/book/impls/30_basic_reactivity_system/030_to_ref/packages/reactivity/baseHandler.ts +++ b/book/impls/30_basic_reactivity_system/030_to_ref/packages/reactivity/baseHandler.ts @@ -15,8 +15,14 @@ export const mutableHandlers: ProxyHandler = { }, set(target: object, key: string | symbol, value: unknown, receiver: object) { + let oldValue = (target as any)[key]; Reflect.set(target, key, value, receiver); - trigger(target, key); + if (hasChanged(value, oldValue)) { + trigger(target, key); + } return true; }, }; + +const hasChanged = (value: any, oldValue: any): boolean => + !Object.is(value, oldValue); diff --git a/book/impls/30_basic_reactivity_system/040_to_refs/packages/reactivity/baseHandler.ts b/book/impls/30_basic_reactivity_system/040_to_refs/packages/reactivity/baseHandler.ts index b5cb5d63..a633f2e4 100644 --- a/book/impls/30_basic_reactivity_system/040_to_refs/packages/reactivity/baseHandler.ts +++ b/book/impls/30_basic_reactivity_system/040_to_refs/packages/reactivity/baseHandler.ts @@ -15,8 +15,14 @@ export const mutableHandlers: ProxyHandler = { }, set(target: object, key: string | symbol, value: unknown, receiver: object) { + let oldValue = (target as any)[key]; Reflect.set(target, key, value, receiver); - trigger(target, key); + if (hasChanged(value, oldValue)) { + trigger(target, key); + } return true; }, }; + +const hasChanged = (value: any, oldValue: any): boolean => + !Object.is(value, oldValue); diff --git a/book/impls/30_basic_reactivity_system/050_computed/packages/reactivity/baseHandler.ts b/book/impls/30_basic_reactivity_system/050_computed/packages/reactivity/baseHandler.ts index b5cb5d63..a633f2e4 100644 --- a/book/impls/30_basic_reactivity_system/050_computed/packages/reactivity/baseHandler.ts +++ b/book/impls/30_basic_reactivity_system/050_computed/packages/reactivity/baseHandler.ts @@ -15,8 +15,14 @@ export const mutableHandlers: ProxyHandler = { }, set(target: object, key: string | symbol, value: unknown, receiver: object) { + let oldValue = (target as any)[key]; Reflect.set(target, key, value, receiver); - trigger(target, key); + if (hasChanged(value, oldValue)) { + trigger(target, key); + } return true; }, }; + +const hasChanged = (value: any, oldValue: any): boolean => + !Object.is(value, oldValue); diff --git a/book/impls/30_basic_reactivity_system/060_computed_setter/packages/reactivity/baseHandler.ts b/book/impls/30_basic_reactivity_system/060_computed_setter/packages/reactivity/baseHandler.ts index b5cb5d63..a633f2e4 100644 --- a/book/impls/30_basic_reactivity_system/060_computed_setter/packages/reactivity/baseHandler.ts +++ b/book/impls/30_basic_reactivity_system/060_computed_setter/packages/reactivity/baseHandler.ts @@ -15,8 +15,14 @@ export const mutableHandlers: ProxyHandler = { }, set(target: object, key: string | symbol, value: unknown, receiver: object) { + let oldValue = (target as any)[key]; Reflect.set(target, key, value, receiver); - trigger(target, key); + if (hasChanged(value, oldValue)) { + trigger(target, key); + } return true; }, }; + +const hasChanged = (value: any, oldValue: any): boolean => + !Object.is(value, oldValue); diff --git a/book/impls/30_basic_reactivity_system/070_watch/packages/reactivity/baseHandler.ts b/book/impls/30_basic_reactivity_system/070_watch/packages/reactivity/baseHandler.ts index b5cb5d63..0825fb15 100644 --- a/book/impls/30_basic_reactivity_system/070_watch/packages/reactivity/baseHandler.ts +++ b/book/impls/30_basic_reactivity_system/070_watch/packages/reactivity/baseHandler.ts @@ -1,4 +1,4 @@ -import { isObject } from "../shared"; +import { hasChanged, isObject } from "../shared"; import { track, trigger } from "./effect"; import { reactive } from "./reactive"; @@ -15,8 +15,11 @@ export const mutableHandlers: ProxyHandler = { }, set(target: object, key: string | symbol, value: unknown, receiver: object) { + let oldValue = (target as any)[key]; Reflect.set(target, key, value, receiver); - trigger(target, key); + if (hasChanged(value, oldValue)) { + trigger(target, key); + } return true; }, }; diff --git a/book/impls/30_basic_reactivity_system/080_watch_api_extends/packages/reactivity/baseHandler.ts b/book/impls/30_basic_reactivity_system/080_watch_api_extends/packages/reactivity/baseHandler.ts index b5cb5d63..417ef412 100644 --- a/book/impls/30_basic_reactivity_system/080_watch_api_extends/packages/reactivity/baseHandler.ts +++ b/book/impls/30_basic_reactivity_system/080_watch_api_extends/packages/reactivity/baseHandler.ts @@ -1,4 +1,4 @@ -import { isObject } from "../shared"; +import { hasChanged, isObject } from "../shared"; import { track, trigger } from "./effect"; import { reactive } from "./reactive"; @@ -15,8 +15,11 @@ export const mutableHandlers: ProxyHandler = { }, set(target: object, key: string | symbol, value: unknown, receiver: object) { + let oldValue = (target as any)[key]; Reflect.set(target, key, value, receiver); - trigger(target, key); + if (hasChanged(value, oldValue)) { + trigger(target, key); + } return true; }, }; diff --git a/book/impls/30_basic_reactivity_system/090_watch_effect/packages/reactivity/baseHandler.ts b/book/impls/30_basic_reactivity_system/090_watch_effect/packages/reactivity/baseHandler.ts index b5cb5d63..417ef412 100644 --- a/book/impls/30_basic_reactivity_system/090_watch_effect/packages/reactivity/baseHandler.ts +++ b/book/impls/30_basic_reactivity_system/090_watch_effect/packages/reactivity/baseHandler.ts @@ -1,4 +1,4 @@ -import { isObject } from "../shared"; +import { hasChanged, isObject } from "../shared"; import { track, trigger } from "./effect"; import { reactive } from "./reactive"; @@ -15,8 +15,11 @@ export const mutableHandlers: ProxyHandler = { }, set(target: object, key: string | symbol, value: unknown, receiver: object) { + let oldValue = (target as any)[key]; Reflect.set(target, key, value, receiver); - trigger(target, key); + if (hasChanged(value, oldValue)) { + trigger(target, key); + } return true; }, }; diff --git a/book/impls/30_basic_reactivity_system/100_reactive_proxy_target_type/packages/reactivity/baseHandler.ts b/book/impls/30_basic_reactivity_system/100_reactive_proxy_target_type/packages/reactivity/baseHandler.ts index b5cb5d63..417ef412 100644 --- a/book/impls/30_basic_reactivity_system/100_reactive_proxy_target_type/packages/reactivity/baseHandler.ts +++ b/book/impls/30_basic_reactivity_system/100_reactive_proxy_target_type/packages/reactivity/baseHandler.ts @@ -1,4 +1,4 @@ -import { isObject } from "../shared"; +import { hasChanged, isObject } from "../shared"; import { track, trigger } from "./effect"; import { reactive } from "./reactive"; @@ -15,8 +15,11 @@ export const mutableHandlers: ProxyHandler = { }, set(target: object, key: string | symbol, value: unknown, receiver: object) { + let oldValue = (target as any)[key]; Reflect.set(target, key, value, receiver); - trigger(target, key); + if (hasChanged(value, oldValue)) { + trigger(target, key); + } return true; }, }; diff --git a/book/impls/30_basic_reactivity_system/110_template_refs/packages/reactivity/baseHandler.ts b/book/impls/30_basic_reactivity_system/110_template_refs/packages/reactivity/baseHandler.ts index b5cb5d63..417ef412 100644 --- a/book/impls/30_basic_reactivity_system/110_template_refs/packages/reactivity/baseHandler.ts +++ b/book/impls/30_basic_reactivity_system/110_template_refs/packages/reactivity/baseHandler.ts @@ -1,4 +1,4 @@ -import { isObject } from "../shared"; +import { hasChanged, isObject } from "../shared"; import { track, trigger } from "./effect"; import { reactive } from "./reactive"; @@ -15,8 +15,11 @@ export const mutableHandlers: ProxyHandler = { }, set(target: object, key: string | symbol, value: unknown, receiver: object) { + let oldValue = (target as any)[key]; Reflect.set(target, key, value, receiver); - trigger(target, key); + if (hasChanged(value, oldValue)) { + trigger(target, key); + } return true; }, }; diff --git a/book/impls/30_basic_reactivity_system/120_proxy_handler_improvement/packages/reactivity/baseHandler.ts b/book/impls/30_basic_reactivity_system/120_proxy_handler_improvement/packages/reactivity/baseHandler.ts index b5cb5d63..417ef412 100644 --- a/book/impls/30_basic_reactivity_system/120_proxy_handler_improvement/packages/reactivity/baseHandler.ts +++ b/book/impls/30_basic_reactivity_system/120_proxy_handler_improvement/packages/reactivity/baseHandler.ts @@ -1,4 +1,4 @@ -import { isObject } from "../shared"; +import { hasChanged, isObject } from "../shared"; import { track, trigger } from "./effect"; import { reactive } from "./reactive"; @@ -15,8 +15,11 @@ export const mutableHandlers: ProxyHandler = { }, set(target: object, key: string | symbol, value: unknown, receiver: object) { + let oldValue = (target as any)[key]; Reflect.set(target, key, value, receiver); - trigger(target, key); + if (hasChanged(value, oldValue)) { + trigger(target, key); + } return true; }, }; diff --git a/book/impls/30_basic_reactivity_system/130_cleanup_effects/packages/reactivity/baseHandler.ts b/book/impls/30_basic_reactivity_system/130_cleanup_effects/packages/reactivity/baseHandler.ts index b5cb5d63..417ef412 100644 --- a/book/impls/30_basic_reactivity_system/130_cleanup_effects/packages/reactivity/baseHandler.ts +++ b/book/impls/30_basic_reactivity_system/130_cleanup_effects/packages/reactivity/baseHandler.ts @@ -1,4 +1,4 @@ -import { isObject } from "../shared"; +import { hasChanged, isObject } from "../shared"; import { track, trigger } from "./effect"; import { reactive } from "./reactive"; @@ -15,8 +15,11 @@ export const mutableHandlers: ProxyHandler = { }, set(target: object, key: string | symbol, value: unknown, receiver: object) { + let oldValue = (target as any)[key]; Reflect.set(target, key, value, receiver); - trigger(target, key); + if (hasChanged(value, oldValue)) { + trigger(target, key); + } return true; }, }; diff --git a/book/impls/30_basic_reactivity_system/140_effect_scope/packages/reactivity/baseHandler.ts b/book/impls/30_basic_reactivity_system/140_effect_scope/packages/reactivity/baseHandler.ts index b5cb5d63..417ef412 100644 --- a/book/impls/30_basic_reactivity_system/140_effect_scope/packages/reactivity/baseHandler.ts +++ b/book/impls/30_basic_reactivity_system/140_effect_scope/packages/reactivity/baseHandler.ts @@ -1,4 +1,4 @@ -import { isObject } from "../shared"; +import { hasChanged, isObject } from "../shared"; import { track, trigger } from "./effect"; import { reactive } from "./reactive"; @@ -15,8 +15,11 @@ export const mutableHandlers: ProxyHandler = { }, set(target: object, key: string | symbol, value: unknown, receiver: object) { + let oldValue = (target as any)[key]; Reflect.set(target, key, value, receiver); - trigger(target, key); + if (hasChanged(value, oldValue)) { + trigger(target, key); + } return true; }, }; diff --git a/book/online-book/src/10-minimum-example/030-minimum-reactive.md b/book/online-book/src/10-minimum-example/030-minimum-reactive.md index b4f10394..61634219 100644 --- a/book/online-book/src/10-minimum-example/030-minimum-reactive.md +++ b/book/online-book/src/10-minimum-example/030-minimum-reactive.md @@ -517,11 +517,18 @@ export const mutableHandlers: ProxyHandler = { }, set(target: object, key: string | symbol, value: unknown, receiver: object) { + let oldValue = (target as any)[key]; Reflect.set(target, key, value, receiver); - trigger(target, key); + // 値が変わったかどうかをチェックしてあげておく + if (hasChanged(value, oldValue)) { + trigger(target, key); + } return true; }, }; + +const hasChanged = (value: any, oldValue: any): boolean => + !Object.is(value, oldValue); ``` ここで、Reflect というものが登場していますが、Proxy と似た雰囲気のものなんですが、Proxy があるオブジェクトに対する設定を書き込む処理だったのに対し、Reflect はあるオブジェクトに対する処理を行うものです。 diff --git a/book/online-book/src/en/10-minimum-example/030-minimum-reactive.md b/book/online-book/src/en/10-minimum-example/030-minimum-reactive.md index 40d8935d..d95bcd51 100644 --- a/book/online-book/src/en/10-minimum-example/030-minimum-reactive.md +++ b/book/online-book/src/en/10-minimum-example/030-minimum-reactive.md @@ -467,11 +467,18 @@ export const mutableHandlers: ProxyHandler = { }, set(target: object, key: string | symbol, value: unknown, receiver: object) { + let oldValue = (target as any)[key]; Reflect.set(target, key, value, receiver); - trigger(target, key); + // check if the value has changed + if (hasChanged(value, oldValue)) { + trigger(target, key); + } return true; }, }; + +const hasChanged = (value: any, oldValue: any): boolean => + !Object.is(value, oldValue); ``` Here, `Reflect` appears, which is similar to `Proxy`, but while `Proxy` is for writing meta settings for objects, `Reflect` is for performing operations on existing objects.