События страницы: полная информация

Вступление

Все события страницы вызываются асинхронно, если хотите заблокировать показ страниц пока что-то не случится, то для этого есть 3 варианта:

  1. Использовать async в route .
  2. Использовать beforeEnter / beforeLeave в route.
  3. Использовать routesBeforeEnter / routesBeforeEnter во View.

Разница между stackPages во View и keepAlive в route :

  1. StackPages применяется на уровне View , т.е. для любого route в нем. Можно использовать во View свой набор routes . KeepAlive применяется на уровне route .
  2. StackPages — весь контент (CSS и HTML) находится в DOM. При keepAlive контент может выгружаться из DOM и помещаться в память, а затем обратно возвращаться в DOM.

События страницы

Шаг 1: формирование содержимого

Формируется содержимое страницы (HTML и CSS), затем оно вставляется в DOM — вызывается событие mounted .

Если вы используете View со stackPages , то страница будет вставлена в DOM только единожды, а значит единожды будет вызвано и mounted . Если вы используете keepAlive в route , то событие также будет вызываться каждый раз, когда страница из памяти попадает в DOM.

Шаг 2: создание компонентов

Начинается процесс создания компонентов страницы и Navbar — вызывается событие init . В «компоненты» входят компоненты, которые будут созданы добавлением классов *-init .

Шаг 3 (отступление): переход на уже созданную страницу

Как только мы попадаем на уже созданную страницу, то будет вызвано событие reinit . Это возможно, если мы вернулись назад или же используем stackPages во View или keepAlive для route — в этих всех случаях событие init вызываться не будет.

Шаг 4: страница готова, старт анимации «показа»

Все, что нужно создано, страница готова к помещению во View — вызывается событие beforein и начинается анимация «показа» страницы.

Шаг 5: анимация завершена

После завершения анимации показа страницы вызывается событие afterin .

Шаг 6: начало «ухода» страницы

Перед тем, как начнется «уход» страницы из видимой области, будет вызвано событие beforeout .

Шаг 7: «уход» завершен

Страница ушла из видимой области окончательно, но еще физически остается во View , т.е. в DOM, — вызывается событие afterout .

Шаг 8: удаление страницы из DOM

Если вы не используете ни stackPages ни keepAlive , то при уходе «в глубину» или «возврате назад», страница может исчезать из DOM — в этом случае вызывается событие beforeremove .

Если используется stackPages , то для страницы никогда не будут вызваны события beforeunmount и beforeremove .

Если вы используете keepAlive , то перед удалением страницы из DOM и помещением ее в память, будет вызвано событие beforeunmount .

Событие beforeremove необходимо использовать для уничтожения любых компонентов, которые вы создали «вручную». Например, вы создали Swiper — обязательно уничтожьте его, иначе будет утечка памяти.

Но если вы создаете компоненты через специальные значения классов, к примеру swiper-init , то они будут автоматически удалены, для этого F7 следит за событиями у page и у tab .

Буду рад критике!

2 Likes

Критики не будет, все верно :+1: