0 added
0 removed
Original
2026-01-01
Modified
2026-03-10
1
<p>Создание любого приложения в Vue.js начинается с создания нового экземпляра. Давайте посмотрим, как это работает.</p>
1
<p>Создание любого приложения в Vue.js начинается с создания нового экземпляра. Давайте посмотрим, как это работает.</p>
2
<p>Для создания экземпляра используется функция<strong>createApp</strong>:</p>
2
<p>Для создания экземпляра используется функция<strong>createApp</strong>:</p>
3
<p>Полученный экземпляр приложения применяется в целях регистрации "глобальных" вещей -- они станут использоваться компонентами внутри данного приложения.</p>
3
<p>Полученный экземпляр приложения применяется в целях регистрации "глобальных" вещей -- они станут использоваться компонентами внутри данного приложения.</p>
4
<p>Приведем небольшой пример:</p>
4
<p>Приведем небольшой пример:</p>
5
<p>Большая часть из этих методов экземпляра приложения возвращают тот же экземпляр, что дает возможность составлять вызовы в цепочку:</p>
5
<p>Большая часть из этих методов экземпляра приложения возвращают тот же экземпляр, что дает возможность составлять вызовы в цепочку:</p>
6
<h2>Корневой компонент</h2>
6
<h2>Корневой компонент</h2>
7
<p>Опции, которые передаются в<strong>createApp</strong>, применяются в целях настройки корневого компонента. Во время монтировании программного приложения он используется в качестве стартовой точки для отрисовки.</p>
7
<p>Опции, которые передаются в<strong>createApp</strong>, применяются в целях настройки корневого компонента. Во время монтировании программного приложения он используется в качестве стартовой точки для отрисовки.</p>
8
<p>То есть приложению нужно, по сути, примонтироваться в DOM-элемент. К примеру, если надо примонтировать приложение<strong>Vue</strong>в <div id="app"></div>, то следует передать<strong>#app</strong>:</p>
8
<p>То есть приложению нужно, по сути, примонтироваться в DOM-элемент. К примеру, если надо примонтировать приложение<strong>Vue</strong>в <div id="app"></div>, то следует передать<strong>#app</strong>:</p>
9
<p>В отличие от многих других методов приложения,<strong>mount</strong>не выполняет возврат экземпляра приложения - вместо этого возвращается экземпляр корневого компонента.</p>
9
<p>В отличие от многих других методов приложения,<strong>mount</strong>не выполняет возврат экземпляра приложения - вместо этого возвращается экземпляр корневого компонента.</p>
10
<p>При этом хоть Vue в полной мере и не реализует паттерн MVVM (opens new window), однако архитектура фреймворка во многом построена на этом паттерне, можно сказать, вдохновлена им. Именно поэтому переменную с экземпляром приложения, как правило, называют<strong>vm</strong>(это сокращение от<strong>ViewModel</strong>).</p>
10
<p>При этом хоть Vue в полной мере и не реализует паттерн MVVM (opens new window), однако архитектура фреймворка во многом построена на этом паттерне, можно сказать, вдохновлена им. Именно поэтому переменную с экземпляром приложения, как правило, называют<strong>vm</strong>(это сокращение от<strong>ViewModel</strong>).</p>
11
<p>Большая часть реальных программных приложений организована в древо вложенных компонентов, которые многократно переиспользуются. К примеру, древо компонентов приложения todo-списка может иметь следующий вид:</p>
11
<p>Большая часть реальных программных приложений организована в древо вложенных компонентов, которые многократно переиспользуются. К примеру, древо компонентов приложения todo-списка может иметь следующий вид:</p>
12
<p>Любой компонент будет иметь свой экземпляр vm-компонента. У некоторых компонентов (того же TodoItem), скорее всего, будут несколько экземпляров, которые станут отображаться в один момент времени. При этом все экземпляры компонентов в данном приложении будут обладать одним и тем же экземпляром приложения.</p>
12
<p>Любой компонент будет иметь свой экземпляр vm-компонента. У некоторых компонентов (того же TodoItem), скорее всего, будут несколько экземпляров, которые станут отображаться в один момент времени. При этом все экземпляры компонентов в данном приложении будут обладать одним и тем же экземпляром приложения.</p>
13
<p>Главное, что надо уяснить --<strong>корневой компонент, по сути, ничем не отличается от любого другого компонента</strong>. При этом опции конфигурации точно такие же, как и поведение соответствующего экземпляра компонента.</p>
13
<p>Главное, что надо уяснить --<strong>корневой компонент, по сути, ничем не отличается от любого другого компонента</strong>. При этом опции конфигурации точно такие же, как и поведение соответствующего экземпляра компонента.</p>
14
<p><em>По материалам https://v3.ru.vuejs.org/ru/guide/.</em></p>
14
<p><em>По материалам https://v3.ru.vuejs.org/ru/guide/.</em></p>
15
15