Watchers

Vue

<script lang="ts" setup>
import { reactive, watch } from 'vue';

const store = reactive({
  count: 0,
  incrememnt() {
    store.count += 1;
  },
});

watch(
  () => store.count,
  (count, prevCount) => {
    console.log(`${prevCount} + 1 = ${count}`);
  },
);
</script>

<template>
  <div>{{ store.count }}</div>
  <button @click="store.incrememnt">Incrememnt</button>
</template>

Vue (watchEffect)

<script lang="ts" setup>
import { reactive, watchEffect } from 'vue';

const store = reactive({
  count: 0,
  incrememnt() {
    store.count += 1;
  },
});

watchEffect(() => {
  console.log(store.count);
});
</script>

<template>
  <div>{{ store.count }}</div>
  <button @click="store.incrememnt">Incrememnt</button>
</template>

Svelte

<script lang="ts">
  import { writable } from 'svelte/store';

  const state = writable({
    count: 0,
  });

  const actions = {
    incrememnt() {
      $state.count += 1;
    },
  };

  $: $state.count, console.log($state.count);
</script>

<div>{$state.count}</div>
<button on:click={actions.incrememnt}>Incrememnt</button>

React

import { useEffect } from 'react';
import { useSignal } from '@preact/signals';

export function App() {
  const count = useSignal(0);

  function increment() {
    count.value += 1;
  }

  useEffect(() => {
    console.log(count.value);
  }, [count.value]);

  return (
    <>
      <div>{count.value}</div>
      <button onClick={increment}>Increment</button>
    </>
  );
}