Skip to content

12.vue.md

Latest commit

 

History

History
86 lines (47 loc) · 5.57 KB

12.vue.md

File metadata and controls

86 lines (47 loc) · 5.57 KB

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

https://v3.ru.vuejs.org/ru/api/options-lifecycle-hooks.html

https://v3.ru.vuejs.org/ru/guide/composition-api-lifecycle-hooks.html

При создании каждый экземпляр проходит через серию шагов инициализации — например, устанавливает наблюдение за данными, компилирует шаблон, монтирует экземпляр в DOM, обновляет DOM при изменении данных. Между шагами вызываются функции, называемые хуками жизненного цикла, предоставляющие возможность выполнять код на определённых этапах.

alt

beforeCreate (setup ())

Вызывается синхронно сразу после инициализации экземпляра, перед установкой наблюдения за данными и механизмов слежения и событий.

created (setup ())

Вызывается синхронно после создания экземпляра. На этом этапе экземпляр закончил обработку опций и настроил: наблюдение за данными, вычисляемые свойства, методы, коллбэки методов-наблюдателей и событий. Однако, фаза монтирования ещё не начата и свойство $el на данный момент недоступно.

(HTTP запросы, websocket, localstorage)

beforeMount (onBeforeMount)

Вызывается непосредственно перед началом монтирования: функция render будет вызываться в первый раз.

mounted (onMounted)

Вызывается после монтирования экземпляра, где элемент, переданный в app.mount, заменяется вновь созданным vm.$el. Если корневой экземпляр примонтирован на элемент документа, то vm.$el также будет элементом документа при вызове mounted.

Обратите внимание: mounted не гарантирует, что все дочерние компоненты будут уже примонтированы. Если необходимо дождаться, пока будут отрисованы все дочерние компоненты, то можно воспользоваться vm.$nextTick внутри mounted:

(Например addEventListener (scroll, resize and etc))

beforeUpdate (onBeforeUpdate)

Вызывается при изменении данных, перед обновлением DOM. В этом хуке удобно получить доступ к существующему DOM перед обновлением, например, чтобы вручную удалить слушатели событий, которые были добавлены.

updated (onUpdated)

Вызывается после того, как обновится виртуальный DOM из-за изменений данных.

beforeUnmount (onBeforeUnmount)

Вызывается перед размонтированием экземпляра компонента. На этом этапе экземпляр компонента всё ещё полностью работоспособен.

unmounted (onUnmounted)

Вызывается после того, как экземпляр компонента размонтирован. Когда этот хук вызван, все директивы экземпляра компонента уже отвязаны, слушатели событий удалены, дочерние экземпляры размонтированы.

setup

Опция компонента, которая является стартовой точкой для Composition API и выполняется перед созданием компонента, после разрешения входных параметров props.

Class and style

https://v3.ru.vuejs.org/ru/guide/class-and-style.html

<div
:class="[
isPrimary && 'primary',
isSecondary && 'secondary',
isTertiary && 'tertiary',
]"
/>

<div
  class="static"
  :class="{ active: isActive, 'text-danger': hasError }"
></div>

Slots

https://vuejs.org/guide/components/slots.html

Provide / Inject

https://vuejs.org/guide/components/provide-inject.html

https://sfc.vuejs.org/#eNpdUctOwzAQ/JXFlySiTei1pJUq7twQF1+Mu2lc+SV7UySi/DubhvK6eT2zM+PxKA4x1pcBxVa0WScTCTLSEPfSGxdDIhghYbcCHVwcCI8wQZeCg4KXCuml7wavyQQPWkVDypoPLL1yWMEoPfAyDcnDfFPrXqUDlQ9VTeElRkxPKmNZwf0CZ2s0lptK+mnelF4HnwlcPsFuDlEWPVob4DUke7wrmHej/Fg/sxCzb2lLVt/t/yT5FZOV64uyA1aP7HnVa5ulBX4/D4QuWkXIE0Dbb/bj+N9rmtqGgSvBeDaFy9qFI9qdFKwvBUNt8y0kVmLpde1UrM85eG7+Gk9+AVmK7RJ4vuOW51mKnijmbdPkTs//dc51SKeGT3UaPBmuD7Nbv6XwnjGxsBSzBBc5iekT9hGpSg==

https://sfc.vuejs.org/#eNp9UU1PwzAM/Ssml7ViTeE6ukkTd04gLrmUzts65UtOOhBV/zvOOui0Sdzi+PnZ771erL2Xxw7FQlShodZHCBg7v1K2Nd5RhL6pfRtr3X7jK4Y4wJacASVkOTWKyB15CEooCzCNAuF2Do0zvou4gfPsjPfNlFW2cTZEMGEHy4TMZnvU2sG7I725m+UTZNr0Uhtk9C9lluWwXEGf1hLfTfYCm87NmF0ea91h/qTswJxVOepkhVxENF7XEbkCqPaPq76/3jYMVcmNE6C1vBaOhXEb1EslmF0JblXlH5GYi1F+YWrPnjjL3p4OVOcG27QYT05/bEaqldjH6MOiLMO2SYkcgnS0K/klqbOxNSgxmOKD3GdAOpk9v+Ao+fOIVBDaDRLSf5xX0BveRDuwWyzlNmNWg1+neLedbWLrbiy37Fo+CkzxOY1Su934fRFUqmWzr2kds4dcRvfmPdJzHZBDvR/bQbcNZo88NojhB62u8QQ=