Можно ли достучаться до DOM в onBeforeMount?

Доступ к DOM в onBeforeMount

Нет, нельзя. В методе жизненного цикла onBeforeMount (Vue.js) или useEffect с пустой зависимостью в React DOM ещё не создан. Это важный момент, который нужно хорошо понимать.

Почему нельзя?

onBeforeMount срабатывает на сервере до монтирования компонента в реальный DOM:

// Vue.js
export default {
  onBeforeMount() {
    // DOM элемента ещё НЕ существует
    const el = document.getElementById('my-element'); // null
    // this.$el тоже undefined
  }
};

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

1. setup() / constructor — инициализация данных
2. onBeforeMount() — подготовка перед монтированием (БЕЗ DOM!)
3. montureToPom — создание элемента в DOM
4. onMounted() — теперь DOM доступен! ✓
5. onBeforeUpdate() — перед обновлением
6. onUpdated() — после обновления
7. onBeforeUnmount() — перед удалением
8. onUnmounted() — после удаления

Правильное время для работы с DOM

onMounted — это правильный крючок:

// Vue 3 Composition API
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const inputRef = ref(null);

    onBeforeMount(() => {
      // inputRef.value === null (нет DOM)
    });

    onMounted(() => {
      // inputRef.value существует
      inputRef.value?.focus();
      
      const text = inputRef.value?.textContent; // Работает
      inputRef.value?.addEventListener('click', handler); // Работает
    });

    return { inputRef };
  }
};

React аналог

В React ситуация аналогична:

import { useEffect, useRef } from 'react';

function MyComponent() {
  const inputRef = useRef(null);

  // Неправильно (даже с пустой зависимостью)
  useEffect(() => {
    // Это ПОСЛЕ первого рендеринга, но есть нюансы
  }, []);

  // Правильно
  useEffect(() => {
    inputRef.current?.focus();
    inputRef.current?.addEventListener('click', handler);
  }, []);

  return <input ref={inputRef} />;
}

Исключение: SSR (Server-Side Rendering)

На сервере DOM не существует вообще:

// Node.js сервер не имеет window/document
onBeforeMount() {
  if (typeof window !== 'undefined') {
    // Безопасно использовать только тут
    const el = document.body;
  }
}

Когда onBeforeMount полезен

Не для DOM, а для:

• Инициализация internal state
• Установка переменных экземпляра
• Загрузка конфига из API (можно, но лучше в onMounted)
• Подготовка данных

onBeforeMount() {
  this.theme = localStorage.getItem('theme') || 'light';
  this.user = this.$route.params.userId;
}

Что НЕ нужно делать

// НЕПРАВИЛЬНО
onBeforeMount() {
  document.body.style.overflow = 'hidden'; // Может не сработать
  this.$el.style.display = 'none'; // this.$el undefined
  document.addEventListener('click', handler); // Можно, но неправильно
}

// ПРАВИЛЬНО
onMounted() {
  document.body.style.overflow = 'hidden'; // Гарантированно сработает
  this.$el.style.display = 'none'; // this.$el существует
  document.addEventListener('click', handler);
}

onUnmounted() {
  document.removeEventListener('click', handler); // Очистка
}

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

import { ref, onBeforeMount, onMounted } from 'vue';

export default {
  setup() {
    const isLoading = ref(true);
    const data = ref(null);
    const elementRef = ref(null);

    onBeforeMount(async () => {
      // Можем загружать данные асинхронно
      // Но к DOM ещё не обращаемся
      try {
        data.value = await fetch('/api/data').then(r => r.json());
      } finally {
        isLoading.value = false;
      }
    });

    onMounted(() => {
      // Теперь можем работать с DOM
      if (elementRef.value) {
        // Анимация
        elementRef.value.classList.add('fade-in');
        
        // Инициализация библиотеки
        initChartLibrary(elementRef.value, data.value);
      }
    });

    return { isLoading, data, elementRef };
  }
};

Главное правило

Запомни: onBeforeMount = данные, onMounted = DOM. Если нужен доступ к DOM элементам компонента — используй onMounted. Это спасает от ошибок и делает код более надёжным.