Reaccionar a Cambios de Estado

Vuewatch()

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

const logged = ref(false)

watch(
  logged,
  (isLogged) => {
    if (isLogged) {
      alert('User is logged')
    }
  },
  { immediate: true },
)
</script>

<template>
  <button @click="logged = true">Log in</button>
</template>

Se utiliza la función watch(), que permite observar una fuente reactiva. Con immediate: true también ejecuta la comprobación al inicializarse.

Vue docs

ReactuseEffect()

import { useEffect, useState } from 'react'

function LoggedAlert() {
  const [logged, setLogged] = useState(false)

  useEffect(() => {
    if (logged) {
      alert('User is logged')
    }
  }, [logged])

  return <button onClick={() => setLogged(true)}>Log in</button>
}

Al usar el Hook useEffect(), la comprobación se ejecuta después del primer renderizado y cuando cambian sus dependencias.

React docs

Angulareffect()

import { Component, effect, signal } from '@angular/core'

@Component({
  selector: 'app-logged-alert',
  standalone: true,
  template: `
    <button (click)="logIn()">Log in</button>
  `,
})
export class LoggedAlertComponent {
  logged = signal(false)

  constructor() {
    effect(() => {
      if (this.logged()) {
        alert('User is logged')
      }
    })
  }

  logIn() {
    this.logged.set(true)
  }
}

La función effect() reacciona a los signals que lee. Se ejecuta inicialmente y cuando estos cambian.

Angular docs