Managing Side Effects with Vue 3 Composition API Lifecycle Hooks

<script setup>
import { ref, onMounted, onUnmounted, onUpdated } from 'vue';

const count = ref(0);
let intervalId = null;

// Called after the component has been mounted to the DOM.
// Perfect for fetching data, setting up subscriptions, or DOM manipulations.
onMounted(() => {
  console.log('Component Mounted! Count is:', count.value);
  intervalId = setInterval(() => {
    count.value++;
  }, 1000);
  console.log('Interval started.');
});

// Called after the component has been unmounted from the DOM.
// Essential for cleaning up side effects to prevent memory leaks.
onUnmounted(() => {
  clearInterval(intervalId);
  console.log('Component Unmounted! Interval cleared.');
});

// Called after the component has updated its DOM tree.
// Useful for performing operations after a reactive state change reflects in the DOM.
onUpdated(() => {
  console.log('Component Updated! New count is:', count.value);
  // Avoid modifying reactive state directly here to prevent infinite update loops
});

// Other less common but available hooks:
// onBeforeMount(() => { console.log('Before Mount'); });
// onBeforeUpdate(() => { console.log('Before Update'); });
// onBeforeUnmount(() => { console.log('Before Unmount'); });
// onErrorCaptured((err, instance, info) => { console.error('Error captured:', err, info); return false; });
// onRenderTracked((e) => { console.log('Render tracked:', e); }); // For debugging reactivity
// onRenderTriggered((e) => { console.log('Render triggered:', e); }); // For debugging reactivity
</script>

<template>
  <div>
    <h1>Vue 3 Lifecycle Hooks Example</h1>
    <p>Count: {{ count }}</p>
  </div>
</template>