Для чего используется Before Each во Vue?

Для чего используется beforeEach во Vue

beforeEach (или beforeCreate в Options API) в Vue 3 — это lifecycle hook, который вызывается в момент инициализации компонента, перед его созданием. Это первый lifecycle hook который срабатывает при создании экземпляра компонента.

Основные lifecycle hooks в Vue 3

// Composition API - рекомендуемый подход
import { 
  beforeCreate, 
  created, 
  beforeMount, 
  mounted,
  beforeUpdate,
  updated,
  beforeUnmount,
  unmounted
} from 'vue';

export default {
  setup() {
    // Это вызывается еще до beforeCreate!
    console.log('Setup');
    
    beforeCreate(() => {
      // Вызывается перед инициализацией
      console.log('Before Create');
    });
    
    created(() => {
      // Вызывается после инициализации
      console.log('Created');
    });
    
    beforeMount(() => {
      // Перед рендеингом в DOM
      console.log('Before Mount');
    });
    
    mounted(() => {
      // После появления в DOM
      console.log('Mounted');
    });
  }
};

beforeCreate (beforeEach) - что это

beforeCreate вызывается когда:

• Компонент начинает инициализироваться
• Все опции еще не обработаны
• data, computed, methods еще недоступны
• this не имеет реактивных свойств

// Options API
export default {
  data() {
    return {
      count: 0
    };
  },
  
  beforeCreate() {
    console.log('beforeCreate:');
    console.log('this.count:', this.count); // undefined!
    console.log('this.$el:', this.$el);     // undefined!
  },
  
  created() {
    console.log('created:');
    console.log('this.count:', this.count); // 0 (доступна!)
    console.log('this.$el:', this.$el);     // undefined (еще не в DOM)
  }
};

Когда использовать beforeCreate

1. Инициализация плагинов

// Примечание: В современном Vue 3 это сделано через setup()
// но для примера:

export default {
  beforeCreate() {
    // Инициализировать плагин ДО того как будут доступны данные
    this.$setupCustomLogic();
  }
};

2. Установка провайдеров (Providers)

import { provide } from 'vue';

export default {
  setup() {
    // В Composition API это вообще не нужен beforeCreate
    // Просто используй provide() в setup()
    provide('appConfig', {
      apiUrl: 'https://api.example.com'
    });
  }
};

3. Глобальная конфигурация

// main.js
const app = createApp(App);

app.component('BaseButton', BaseButton);
app.config.globalProperties.$http = axios;

app.mount('#app');

Правда про beforeCreate в современном Vue

Важно: В Vue 3 с Composition API beforeCreate практически не нужен. Вместо этого используй setup():

// Плохо - Options API с beforeCreate
export default {
  beforeCreate() {
    // Что-то инициализировать
  },
  data() {
    return { count: 0 };
  }
};

// Хорошо - Composition API
import { ref } from 'vue';

export default {
  setup() {
    // Инициализация происходит прямо здесь
    const count = ref(0);
    
    // setup() вызывается до всех lifecycle hooks
    console.log('Это как beforeCreate, но удобнее');
    
    return { count };
  }
};

Полный lifecycle

import { 
  beforeCreate, 
  created, 
  beforeMount, 
  mounted,
  beforeUpdate,
  updated,
  beforeUnmount,
  unmounted
} from 'vue';

export default {
  setup() {
    console.log('1. setup() вызвана');
    
    beforeCreate(() => {
      console.log('2. beforeCreate() - data еще не инициализирована');
    });
    
    created(() => {
      console.log('3. created() - data инициализирована, но не в DOM');
    });
    
    beforeMount(() => {
      console.log('4. beforeMount() - готово к рендерингу в DOM');
    });
    
    mounted(() => {
      console.log('5. mounted() - компонент в DOM, можно работать с $el');
    });
    
    beforeUpdate(() => {
      console.log('6. beforeUpdate() - данные изменились, перед обновлением');
    });
    
    updated(() => {
      console.log('7. updated() - компонент обновлен в DOM');
    });
    
    beforeUnmount(() => {
      console.log('8. beforeUnmount() - перед удалением из DOM');
    });
    
    unmounted(() => {
      console.log('9. unmounted() - компонент удален из DOM');
    });
  }
};

// Порядок вывода при создании:
// 1. setup() вызвана
// 2. beforeCreate()
// 3. created()
// 4. beforeMount()
// 5. mounted()

Практические примеры

Пример 1: Инициализация данных

import { ref, onBeforeMount } from 'vue';

export default {
  setup() {
    const users = ref([]);
    const isLoading = ref(true);
    
    // Когда компонент готов к рендерингу
    onBeforeMount(async () => {
      console.log('Загружаю данные перед рендерингом');
      try {
        const response = await fetch('/api/users');
        users.value = await response.json();
      } finally {
        isLoading.value = false;
      }
    });
    
    return { users, isLoading };
  }
};

Пример 2: Работа с третьей библиотекой

import { onMounted } from 'vue';

export default {
  setup() {
    let chart = null;
    
    onMounted(() => {
      // Chart требует DOM элемент
      // Поэтому инициализируем в mounted, не раньше
      const ctx = document.getElementById('myChart');
      chart = new Chart(ctx, {
        type: 'bar',
        data: { /* ... */ }
      });
    });
  }
};

Пример 3: Cleanup в beforeUnmount

import { onMounted, onBeforeUnmount } from 'vue';

export default {
  setup() {
    let intervalId;
    
    onMounted(() => {
      // Запускаем интервал
      intervalId = setInterval(() => {
        console.log('Tick');
      }, 1000);
    });
    
    onBeforeUnmount(() => {
      // Очищаем интервал перед удалением
      clearInterval(intervalId);
      console.log('Компонент удаляется, интервал очищен');
    });
  }
};

Таблица lifecycle hooks

Распространенные ошибки

// Ошибка 1: Использование beforeCreate вместо created
export default {
  beforeCreate() {
    // ПЛОХО - this.count не существует
    console.log(this.count); // undefined
  },
  data() {
    return { count: 0 };
  }
};

// Исправление
export default {
  created() {
    // ХОРОШО - this.count существует
    console.log(this.count); // 0
  },
  data() {
    return { count: 0 };
  }
};

// Ошибка 2: Работа с DOM в beforeMount
export default {
  beforeMount() {
    // ПЛОХО - DOM еще не существует
    this.$el.textContent = 'Hello'; // $el undefined
  }
};

// Исправление
export default {
  mounted() {
    // ХОРОШО - DOM существует
    this.$el.textContent = 'Hello';
  }
};

// Ошибка 3: Забыть очистить в beforeUnmount
export default {
  mounted() {
    // Слушаем событие
    window.addEventListener('resize', this.handleResize);
  },
  beforeUnmount() {
    // ОБЯЗАТЕЛЬНО удалить слушатель!
    window.removeEventListener('resize', this.handleResize);
  }
};

Современный подход (Vue 3 + Composition API)

import { ref, onBeforeCreate, onCreated, onMounted, onBeforeUnmount } from 'vue';

export default {
  setup() {
    const count = ref(0);
    
    // Вместо Options API hooks, используй Composition API функции
    onMounted(() => {
      console.log('Компонент смонтирован');
    });
    
    onBeforeUnmount(() => {
      console.log('Компонент сейчас будет удален');
    });
    
    return { count };
  }
};

Заключение

beforeCreate — это первый lifecycle hook в Vue, который вызывается перед инициализацией компонента. Однако в современном Vue 3 с Composition API это редко используется напрямую, так как setup() предоставляет больше удобства. Понимание lifecycle важно для:

• Корректной инициализации данных
• Работы с DOM элементами
• Очистки ресурсов (слушатели, интервалы)
• Синхронизации с внешними библиотеками