Vue.js: What is the difference between onMounted and onBeforeMount?

1<script setup>
2import { onMounted, onBeforeMount, ref } from "vue"
3
4const el = ref(null)
5
6onBeforeMount(() => {
7  // el.value is null
8})
9
10onMounted(() => {
11  // el.value is available
12})
13</script>
14
15<template>
16  <div ref="el">Content</div>
17</template>