Создаем экземпляр приложения в Vue.js | OTUS

Создаем экземпляр приложения в Vue.js

Создание любого приложения в Vue.js начинается с создания нового экземпляра. Давайте посмотрим, как это работает.

Для создания экземпляра используется функция createApp:

1-1801-1947b2.png

Полученный экземпляр приложения применяется в целях регистрации «глобальных» вещей -- они станут использоваться компонентами внутри данного приложения.

Приведем небольшой пример:

2-1801-4430d0.png

Большая часть из этих методов экземпляра приложения возвращают тот же экземпляр, что дает возможность составлять вызовы в цепочку:

3-1801-7ccc79.png

Корневой компонент

Опции, которые передаются в createApp, применяются в целях настройки корневого компонента. Во время монтировании программного приложения он используется в качестве стартовой точки для отрисовки.

То есть приложению нужно, по сути, примонтироваться в DOM-элемент. К примеру, если надо примонтировать приложение Vue в <div id="app"></div>, то следует передать #app:

4-1801-25a0fe.png

В отличие от многих других методов приложения, mount не выполняет возврат экземпляра приложения — вместо этого возвращается экземпляр корневого компонента.

При этом хоть Vue в полной мере и не реализует паттерн MVVM (opens new window), однако архитектура фреймворка во многом построена на этом паттерне, можно сказать, вдохновлена им. Именно поэтому переменную с экземпляром приложения, как правило, называют vm (это сокращение от ViewModel).

Большая часть реальных программных приложений организована в древо вложенных компонентов, которые многократно переиспользуются. К примеру, древо компонентов приложения todo-списка может иметь следующий вид:

5-1801-cf1284.png

Любой компонент будет иметь свой экземпляр vm-компонента. У некоторых компонентов (того же TodoItem), скорее всего, будут несколько экземпляров, которые станут отображаться в один момент времени. При этом все экземпляры компонентов в данном приложении будут обладать одним и тем же экземпляром приложения.

Главное, что надо уяснить -- корневой компонент, по сути, ничем не отличается от любого другого компонента. При этом опции конфигурации точно такие же, как и поведение соответствующего экземпляра компонента.

По материалам https://v3.ru.vuejs.org/ru/guide/.

Не пропустите новые полезные статьи!

Спасибо за подписку!

Мы отправили вам письмо для подтверждения вашего email.
С уважением, OTUS!

Автор
0 комментариев
Для комментирования необходимо авторизоваться
Популярное
Сегодня тут пусто
🔥 Выгодные предложения!
Успейте начать обучение со скидкой до 10%. Акция до 31 июля →