Задать вопрос

В чем разница между асинхронным и статичным импортом в vue3?

У меня есть компонент, который импортируется асинхронно через defineAsyncComponent
Я подготовил пример, нужно грузить приложение на ширине > 760 и сразу уменьшить ширину экрана < 760, после этого на клиенте мы увидим, что в шаблоне текущее значение ширины будет корректным, но стилей у компонента не будет
<template>
    <div :style="windowSize.width < 760 ? 'border: 1px solid red' : ''">
        window size: {{ windowSize }}
    </div>
</template>

Если уже на клиенте изменять ширину экрана, то стили будут отображаться согласно условию

Если я в своем примере сделаю статичный импорт таких проблем не будет
import AsyncComp from '../components/AsyncComp.vue'


В чем разница между асинхронным и статичным импортом? Почему это так работает?

https://codesandbox.io/p/devbox/bitter-rgb-mtk2q8
  • Вопрос задан
  • 111 просмотров
Подписаться 1 Простой Комментировать
Пригласить эксперта
Ответы на вопрос 1
@7rows
Frontend Разработчик / Vue / JS / TS / CSS
Суть в том, что , асинхронный компонент подгрузится тогда, когда будет выполнено условие и изначально бандл будет меньше.
Статичный - у тебя компонент сразу будет в сборке, и не важно, будет ли условие использовано или нет.

Когда это может выстрелить в ногу-
Предположим, у тебя есть модальное окно, в нем у тебя через defineAsync грузится иконка, как компонент, так вот, при открытии первого раза, у тебя будет эффект мерцания, потому что, компонент загрузился и остался.
Как лучше использовать ? ну, тут все от задачи зависит.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы