Писать запрос во Vue нужно в created или в mounted

Когда писать запрос в Vue: created или mounted?

Ответ: В большинстве случаев нужно писать запрос в mounted, а не в created. Это рекомендованный подход в современном Vue.

Жизненный цикл Vue компонента

Понимание разницы между хуками важно для правильной работы приложения:

• created — компонент инициализирован, но ещё не добавлен в DOM
• mounted — компонент полностью добавлен в DOM, готов к взаимодействию

Почему mounted лучше?

1. DOM готов к использованию

Если в запросе возвращаются данные, которые нужно рендерить в шаблон, mounted гарантирует, что DOM уже существует:

export default {
  mounted() {
    this.fetchUserData(); // DOM готов
  },
  methods: {
    fetchUserData() {
      fetch("/api/users").then(res => res.json()).then(data => {
        this.users = data; // Шаблон готов обновиться
      });
    }
  }
}

2. Ссылки на элементы работают

Если используются $refs, они доступны только после монтирования:

export default {
  mounted() {
    // $refs.input существует
    this.$refs.input.focus();
    this.loadData();
  }
}

3. Логика инициализации

Запросы часто нужны для инициализации UI, что логичнее делать в mounted:

export default {
  data() {
    return { items: [] }
  },
  mounted() {
    // Инициализируем список после монтирования компонента
    this.fetchItems();
  },
  methods: {
    fetchItems() {
      fetch("/api/items").then(res => res.json()).then(data => {
        this.items = data;
      });
    }
  }
}

Когда может использоваться created?

В редких случаях created имеет смысл:

1. Запросы, которые не зависят от DOM — чисто бизнес-логика, инициализация данных:

export default {
  created() {
    // Загружаем конфигурацию (не нужен DOM)
    this.fetchConfig();
  }
}

1. Vue 2 и SSR — серверный рендеринг требует запросов в created

Лучшие практики

Используй mounted по умолчанию:

export default {
  mounted() {
    this.fetchData();
  }
}

Используй async/await для чистоты:

export default {
  async mounted() {
    try {
      const res = await fetch("/api/data");
      this.data = await res.json();
    } catch (error) {
      console.error("Ошибка загрузки:", error);
    }
  }
}

В Vue 3 (Composition API) используй onMounted:

import { onMounted, ref } from "vue";

export default {
  setup() {
    const data = ref([]);
    
    onMounted(async () => {
      const res = await fetch("/api/data");
      data.value = await res.json();
    });
    
    return { data };
  }
}

Заключение

Правило: Пиши запросы в mounted, это гарантирует, что:

• DOM полностью готов
• $refs доступны
• Компонент готов к взаимодействию
• Шаблон может сразу отобразить полученные данные

Используй created только для инициализации чистой логики, которая не зависит от DOM.