Vue lifecycle hooks คืออะไร

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

const data = ref(null);

onMounted(() => {
  // component is now in the DOM — fetch data, access elements, init libraries
  fetchData().then(d => (data.value = d));
});

onUpdated(() => {
  // runs after the DOM re-renders due to a reactive change
});

onUnmounted(() => {
  // component is being removed — CLEAN UP here
  clearInterval(timer);
  window.removeEventListener("resize", handler);
});
</script>