Function syncWatch

Watches reactive values and executes a callback whenever those values change.

This function is the synchronous variant of watch. It will re-execute after every fine grained change, even if those changes occur in immediate succession. syncWatch should therefore be considered a low level primitive, for most use cases watch should be the right tool instead.

Example:

const r1 = reactive(1);
const r2 = reactive(2);
syncWatch(
    // Selector: reactive code (may be complex, but should be fast).
    () => [r1.value, r2.value, r1.value + r2.value],

    // Callback: only executes if selector returns different values.
    ([v1, v2, v3]) => {
        console.log(v1, v2, v3);
    }
);
Copy

syncWatch returns a handle that can be used to unsubscribe from changes. That handle's destroy() function should be called to stop watching when you are no longer interested in updates:

const handle = syncWatch(() => [someReactive.value], () => {
  // ...
});
// later:
handle.destroy();
Copy

NOTE: You must not modify the parameters that get passed into callback.

This overload is used when immediate is not set to false.