\n```\n\nComposition API: `created` ≈ код в `setup` / `\n\n```\n\nSSR: `mounted` только на клиенте — идеальное место для browser-only API.\n\n## Итог\nДанные и запросы — раньше (`created`/setup); измерения и DOM-API — в `mounted`/`onMounted`."}}}

В чём разница между `created` и `mounted`?

Vue · junior · сложность 3

Войти, чтобы отмечать

Ключевая идея

Оба — хуки жизненного цикла Options API. created — экземпляр уже реактивен, но DOM ещё нет. mounted — компонент вставлен в документ, $el доступен.

Сравнение

	`created`	`mounted`
Реактивные data	да	да
Доступ к DOM	нет	да
Типичные задачи	init state, запросы	размеры, focus, сторонние lib

<script>
export default {
  data: () => ({ width: 0 }),
  created() {
    // this.$el ещё недоступен
    this.loadUser()
  },
  mounted() {
    this.width = this.$el.clientWidth
  },
  methods: {
    async loadUser() { /* fetch */ },
  },
}
</script>

Composition API: created ≈ код в setup / <script setup>; mounted → onMounted.

<script setup>
import { onMounted, ref } from 'vue'
const el = ref(null)
onMounted(() => el.value?.focus())
</script>
<template><input ref="el" /></template>

SSR: mounted только на клиенте — идеальное место для browser-only API.

Итог

Данные и запросы — раньше (created/setup); измерения и DOM-API — в mounted/onMounted.

Загрузка…