RosettaJS: Comparativas de Vue, React y Angular

Ciclo de vida y DOM

Ejecutar Código al Desmontar un Componente

El ciclo de vida de un componente permite ejecutar tareas cuando deja de mostrarse, normalmente para limpiar efectos creados previamente.

Ejemplo

Eliminar un listener de los cambios de tamaño de la ventana cuando un componente deja de mostrarse.

VueonUnmounted

<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue'

function handleResize() {
  console.log('Window resized')
}

onMounted(() => {
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
})
</script>

<template>
  <p>Listening for resize events</p>
</template>

Usa onUnmounted para eliminar el listener después de que el componente se ha desmontado.

Vue docs

ReactuseEffect cleanup

import { useEffect } from 'react'

function Status() {
  useEffect(() => {
    function handleResize() {
      console.log('Window resized')
    }

    window.addEventListener('resize', handleResize)

    return () => {
      window.removeEventListener('resize', handleResize)
    }
  }, [])

  return <p>Listening for resize events</p>
}

Devuelve una función de limpieza desde useEffect para eliminar el listener al finalizar el efecto.

React docs

AngularngOnDestroy

import { Component } from '@angular/core'

@Component({
  selector: 'app-status',
  standalone: true,
  template: `<p>Listening for resize events</p>`,
})
export class StatusComponent {
  handleResize = () => {
    console.log('Window resized')
  }

  ngOnInit() {
    window.addEventListener('resize', this.handleResize)
  }

  ngOnDestroy() {
    window.removeEventListener('resize', this.handleResize)
  }
}

Define ngOnDestroy para eliminar el listener justo antes de que Angular destruya el componente.

Angular docs