• 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);
    }
    );

    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 = watch(() => [someReactive.value], () => {
    // ...
    });
    // later:
    handle.destroy();

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

    Type Parameters

    • const Values extends unknown[]

    Parameters

    Returns CleanupHandle

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

    Type Parameters

    • const Values extends unknown[]

    Parameters

    Returns CleanupHandle