What is the difference between onBeforeMount and onMounted in Vue?

Question

Accepted Answer

**onBeforeMount** — before DOM insertion. **onMounted** — after DOM insertion.

```typescript
import { onBeforeMount, onMounted, ref } from "vue"

export default {
    setup() {
        const el = ref(null)
        
        onBeforeMount(() => {
            console.log("Before mount")
            // el.value is null
        })
        
        onMounted(() => {
            console.log("After mount")
            // el.value is DOM element
        })
        
        return { el }
    }
}
```

**Key differences:**
- **onBeforeMount** — DOM not available.
- **onMounted** — DOM available.
- **onMounted** — most common.

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