Медиа запросы или разные компоненты во Vue проекте для адаптивности?

Question

[postya]

Сайт на Vue js
Сейчас делаю адптивность сайта под разные устройства
Сейчас сделал адптивность для планшетов(992 px) с применением разных компонентов, а не меди запросами и столкнулся с такой проблемой: делаю ресайз в инструментах разработчика и верстка меняется только если перезагружу страницу, то есть компонент для планшетной верстки применится тоько после перезагрузки страницы
Если же сделать всё на media queries, без применения разных компонентов, то адаптивная верстка применяется сразу же при ресайзе в инструментах разработчика
Получается,что использование media queries лучше, так как вижу изменения на лету

Какая лучшая практика для Vue JS проектов? Применение разных компонентов или media queries?

Компоненты применял так:

<Header v-if="!tabletView" />
    <HeaderTablet v-else />

<script>
import Header from "../components/Header";
import HeaderTablet from "../components/Responsive/HeaderTablet";

export default {
  name: "Home",
  components: {
    Header,  
    HeaderTablet
  },
data() {
    return {
      tabletView: false
    };
  },
methods: {
    handleView() {
      window.innerWidth <= 992
        ? (this.tabletView = true)
        : (this.tabletView = false);
    }
  },
  created() {
    this.handleView();
  }
}
</script>

Comments

[Тарас Шульга]

подсказка есть вызывать функцию проверки ширины экрана при ресайзе то усе заработает)

[postya]

Тарас Шульга, благодарю за ответ, я нашел вызов функции при ресайзе окна. Но всё же, какая лучшая практика считается? Какой вариант используется больше во Vue проектах не знаете? сами каким больше способом пользуетесь?

[WapSter]

postya, а вот самому логически подумать слабо наверное. Используя разные компоненты ты увеличиваешь код который вообще не нужен.

Но всё же, какая лучшая практика считается?

уместная в контексте задачи.

Answer 1

[postya]

Использовал вариант с применением разных компонентов для адаптивности и создал вызов функции при ресайзе окна так:

created() {
    this.handleView();
    window.addEventListener("resize", this.handleView);
    console.log(this.pageView);
  },
  destroyed() {
    window.removeEventListener("resize", this.handleView);
    console.log(this.pageView);
  }