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

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

Это вопрос о lifecycle hooks в Vue.js. created и mounted — это два разных этапа жизненного цикла компонента, вызывающихся в разное время и с разными возможностями.

Когда они вызываются

created

created вызывается после того, как компонент был создан, но ДО того, как он отрендерился в DOM:

// Vue 2
export default {
  data() {
    return { count: 0 }
  },

  created() {
    console.log('1. created - компонент создан')
    console.log('2. this.count =', this.count)  // Доступна реактивная переменная
    console.log('3. this.$el =', this.$el)      // undefined! Ещё нет DOM
  }
}

mounted

mounted вызывается после того, как компонент отрендерился и его элементы появились в DOM:

export default {
  data() {
    return { count: 0 }
  },

  mounted() {
    console.log('1. mounted - компонент в DOM')
    console.log('2. this.count =', this.count)    // Доступна переменная
    console.log('3. this.$el =', this.$el)        // <div>...</div>
    console.log('4. DOM готов!')
  }
}

Визуальное представление

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

┌─────────────────────────────────────┐
│ 1. new Vue()                        │
└─────────────┬───────────────────────┘
              │
┌─────────────▼───────────────────────┐
│ 2. Setup (options API)              │
└─────────────┬───────────────────────┘
              │
┌─────────────▼───────────────────────┐
│ 3. beforeCreate                     │
└─────────────┬───────────────────────┘
              │
┌─────────────▼───────────────────────┐
│ 4. CREATED <-- (this.data доступна)│
└─────────────┬───────────────────────┘
              │
┌─────────────▼───────────────────────┐
│ 5. beforeMount                      │
│    (рендеринг начинается)           │
└─────────────┬───────────────────────┘
              │
┌─────────────▼───────────────────────┐
│ 6. Компилирует template             │
│    Создаёт Virtual DOM              │
│    Обновляет реальный DOM           │
└─────────────┬───────────────────────┘
              │
┌─────────────▼───────────────────────┐
│ 7. MOUNTED <-- (DOM готов!)         │
│    (this.$el существует)            │
└─────────────┬───────────────────────┘
              │
        (компонент работает)

Практические различия

created — работа с данными

Используй created когда:

• Нужно загрузить данные перед рендерингом
• Нужно инициализировать значения
• Нужно установить watchers
• Нет необходимости работать с DOM

export default {
  data() {
    return {
      users: [],
      loading: true
    }
  },

  created() {
    // Загрузка данных с сервера ДО рендеринга
    this.fetchUsers();
    
    // Установка watchers
    this.$watch('users', () => {
      console.log('Users changed')
    })
  },

  methods: {
    fetchUsers() {
      fetch('/api/users')
        .then(r => r.json())
        .then(data => {
          this.users = data;
          this.loading = false;
        })
    }
  }
}

mounted — работа с DOM

Используй mounted когда:

• Нужно найти элементы в DOM
• Нужно инициализировать jQuery плагины
• Нужно добавить event listeners к элементам
• Нужно работать с размерами и позициями элементов
• Нужно интегрировать сторонние библиотеки

export default {
  data() {
    return {
      chart: null
    }
  },

  mounted() {
    // Теперь DOM существует!
    const chartElement = this.$el.querySelector('#chart');
    
    // Инициализация Chart.js
    this.chart = new Chart(chartElement, {
      type: 'line',
      data: { /* ... */ }
    });
    
    // Добавление обработчика события
    this.$el.addEventListener('click', this.handleClick);
    
    // Получение размеров
    console.log(chartElement.offsetWidth);
  }
}

Проблемы и решения

Проблема: В created нет доступа к DOM

// ❌ Неправильно
created() {
  const elem = this.$el.querySelector('.title')  // undefined!
}

// ✅ Правильно
mounted() {
  const elem = this.$el.querySelector('.title')  // Работает!
}

Проблема: Выполнить действие после появления элемента

// ❌ Неправильно
created() {
  this.$nextTick(() => {
    // Всё ещё нет DOM
  })
}

// ✅ Правильно
mounted() {
  // DOM уже существует
  this.$nextTick(() => {
    // Используй это если нужны обновления
  })
}

Composition API (Vue 3)

В Vue 3 это выглядит так:

import { onMounted, onCreated } from 'vue'

export default {
  setup() {
    onCreated(() => {
      console.log('created - нет DOM')
    })

    onMounted(() => {
      console.log('mounted - DOM готов')
    })
  }
}

Резюме

created:

• Вызывается раньше
• Данные уже реактивны
• Нет доступа к DOM (this.$el undefined)
• Идеально для загрузки данных, инициализации
• Лучше для Server-Side Rendering (SSR)

mounted:

• Вызывается после рендеринга
• Данные реактивны
• Есть доступ к DOM (this.$el готов)
• Идеально для работы с DOM элементами
• Плохо для SSR (вызывается только на клиенте)

Правило: Если нужен DOM — используй mounted. Если работаешь только с данными — используй created.