Руководство
Основы
- Установка
- Введение
- Экземпляр Vue
- Синтаксис шаблонов
- Вычисляемые свойства и слежение
- Работа с классами и стилями
- Условная отрисовка
- Отрисовка списков
- Обработка событий
- Работа с формами
- Основы компонентов
Продвинутые компоненты
- Регистрация компонентов
- Входные параметры
- Пользовательские события
- Слоты
- Динамические и асинхронные компоненты
- Обработка крайних случаев
Переходы и анимации
- Анимирование списков и появления/исчезновения
- Анимирование переходов между состояниями
Переиспользование и композиция
- Примеси
- Пользовательские директивы
- Render-функции и JSX
- Плагины
- Фильтры
Инструментарий
- Однофайловые компоненты
- Тестирование
- Поддержка TypeScript
- Публикация на production
Масштабирование
- Роутинг
- Управление состоянием приложения
- SSR. Отрисовка на стороне сервера
- Безопасность
Продвинутые темы
- Подробно о реактивности
Вопросы миграции
- Миграция с Vue 1.x
- Миграция с Vue Router 0.7.x
- Миграция с Vuex 0.6.x на 1.0
Мета
- Сравнение с другими фреймворками
- Присоединяйтесь к сообществу Vue.js!
- Познакомьтесь с командой
Эта документация для версий v2.x и ранее. Для v3.x, документация на русском здесь.
Динамические и асинхронные компоненты
Подразумевается, что вы уже изучили и разобрались с разделом Основы компонентов. Если нет — прочитайте его сначала.
keep-alive
с динамическими компонентами
Ранее мы использовали атрибут is
для переключения компонентов в интерфейсе вкладок:
|
Но иногда, при переключении между компонентами, вы хотите сохранить их состояния или избежать повторной отрисовки по соображениям производительности. Например, когда немного доработаем наш интерфейс с вкладками:
Вы можете заметить, что если выбрать запись, переключиться на вкладку Archive, затем переключиться обратно на Posts, то больше не будет показываться выбранная запись. Это связано с тем, что каждый раз, когда вы переключаетесь на новую вкладку, Vue создаёт новый экземпляр currentTabComponent
.
Пересоздание динамических компонентов обычно является полезным поведением, но в нашем случае, мы хотим чтобы экземпляры компонентов вкладок кэшировались после их создания в первый раз. Для решения этой проблемы мы можем обернуть наш динамический компонент в элемент <keep-alive>
:
|
Посмотрите на результат ниже:
Теперь вкладка Posts управляет собственным состоянием (выбранной записью) даже когда не отображается. Посмотрите этот пример для полного примера кода.
Обратите внимание, что <keep-alive>
требует, чтобы у всех переключаемых компонентов было задано имя, либо через опцию name
компонента, либо через локальную/глобальную регистрацию.
Подробнее с элементом <keep-alive>
можно ознакомиться на странице API.
Асинхронные компоненты
Иногда бывает удобно разделить крупное приложение на части и подгружать компоненты с сервера только тогда, когда в них возникнет потребность. Для этого Vue позволяет определить компонент как функцию-фабрику, асинхронно возвращающую определение компонента. Vue вызовет фабричную функцию только тогда, когда компонент действительно понадобится, и закэширует результат для дальнейшего использования. Например:
|
Функция-фабрика принимает параметр resolve
— коллбэк, который вызывается после того, как определение компонента получено от сервера. Кроме того, можно вызвать reject(reason)
, если загрузка по какой-либо причине не удалась. Мы используем setTimeout
исключительно в демонстрационных целях; как именно получать компонент в реальной ситуации — решать только вам самим. Один из удачных подходов — это использовать асинхронные компоненты в связке с функциями Webpack по разделению кода:
|
Также можно возвращать Promise
из функции-фабрики, поэтому с Webpack 2 и синтаксисом ES2015 можно использовать динамические импорты:
|
При использовании локальной регистрации компонентов, вы также можете непосредственно указывать функцию, которая возвращает Promise
:
|
Если вы используете Browserify и также хотите реализовать асинхронную загрузку компонентов, нам, к сожалению, придётся вас огорчить. Сам создатель Browserify прояснил, что асинхронная загрузка «не является функцией, которую Browserify когда-либо будет поддерживать». По крайней мере, официально. Сообщество Browserify обнаружило возможные обходные пути, которые могут быть полезны в уже существующих сложных приложениях. Но в целом мы советуем использовать Webpack, обладающий полноценной встроенной поддержкой асинхронной загрузки частей сборки.
Управление состоянием загрузки
Добавлено в версии 2.3.0+
Фабрика асинхронного компонента также может возвращать объект следующего формата:
|
Обратите внимание, что вы должны использовать Vue Router версии 2.4.0+ если вы хотите использовать указанный выше синтаксис для компонентов маршрута.