Жизненный цикл Vue

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

Каждая из них — это специальные функции, к которым мы можем получить доступ в нашем экземпляре. Допустим, когда наш экземпляр смонтирован, мы хотим создать сетевой запрос для получения некоторых данных. Как мы можем убедиться, что запрос отправляется сразу после монтирования нашего экземпляра? Мы просто определяем функцию mounted() и делаем в ней наш запрос. Эти функции не входят в наше свойство методов. Вместо этого они определяются прямо в корне экземпляра, как и другие свойства, которые мы обсуждали. Я вижу, что это будет очень полезно в будущем для определения времени выполнения определенных задач.

Реквизит

Компоненты в Vue могут усложняться. Могут быть родительские компоненты с дочерним компонентом, возможно, несколько дочерних компонентов. Мы работаем с большим количеством данных, так как же мы можем передавать эти данные между разными компонентами? Допустим, у нас есть компонент в нашем файле App.vue с именем «пользователь». Наш App.vue имеет свойство под названием «имя» в своей функции данных. Мы хотим дать этому свойству «имя» нашему дочернему компоненту. Мы можем сделать это с помощью директивы v-bind, например:

Затем в нашем файле User.vue мы должны сообщить Vue, что ожидаем некоторого значения от родительского компонента. Мы можем сделать это, настроив свойство «реквизит» в нашем пользовательском компоненте следующим образом.

Мы видим, что «реквизит» — это объект, а ключи — это то же свойство, для которого v-bind использовался в App.vue. Здесь есть несколько дополнительных реквизитов, которые я буду использовать в более позднем мини-проекте. Значение для этих ключей является типом значения, которое мы ожидаем.

Слоты

Что произойдет, если у нас есть тег компонента в нашем файле App.vue, и мы хотим отобразить что-то внутри этого тега?

<userComp>
  <h1>Hello there</h1>
</userComp>

Это не будет отображаться правильно, потому что компонент не ожидает, что что-то будет внутри его тега. Он отображает только то, что является частью его шаблона. Нам нужно сообщить этому компоненту Vue, что он ожидает дополнительную информацию внутри тегов компонента. Мы делаем это просто, заходя в файл компонента и добавляя его в шаблон.

<template>
<slot></slot
</template>

Это говорит Vue отобразить шаблон, как обычно, но также поместить в этот «слот» любую дополнительную информацию, которую мы помещаем в тег ‹userComp›.

Маршруты

Как и в Express, мы можем указать разные маршруты для Vue. Первое, что нам нужно сделать, это установить vue router в качестве зависимости.

npm install vue-router --save

Затем мы импортируем модуль vue-router в наш файл App.vue. Затем мы сообщаем Vue, что используем этот модуль, точно так же, как мы сообщаем Express, какое промежуточное ПО мы используем.

Vue.use(VueRouter);

Теперь мы можем определить все наши маршруты в App.vue, но обычно принято определять их в файле route.js, а затем экспортировать его в файл App.vue. Причина в том, что в сложных приложениях может быть очень много маршрутов, и это сильно загромождает наш файл App.vue.

Первое, что мы хотим сделать в нашем файле route.js, — это импортировать все наши компоненты, потому что мы определим маршрут к каждому из них. Затем мы создаем массив маршрутов, который содержит объекты. Эти объекты имеют ключи «путь» и «компонент». «Путь» укажет маршрут, а «компонент» укажет, какой компонент будет отображаться на этом маршруте. Вот как будет выглядеть пример route.js

Как только мы определили наши маршруты в route.js, мы можем импортировать их в App.vue, а затем создать новый экземпляр VueRouter и, наконец, поместить его в наш экземпляр Vue.

Это пока не сработает; он отрендерится, но мы пока не увидим наши компоненты на правильных маршрутах. Это потому, что нам нужно поместить <router-view> где-то внутри нашего файла App.vue. Это сообщит Vue, что мы хотим отобразить соответствующий компонент в этом теге. По умолчанию Vue создает маршруты, используя «режим хеширования». Это означает, что URL-адреса будут выглядеть так /#/user вместо /user . Мы можем изменить это, добавив еще одно свойство в наш экземпляр VueRouter под названием «режим», а затем установив его значение в «история».