Вступление
Все события страницы вызываются асинхронно, если хотите заблокировать показ страниц пока что-то не случится, то для этого есть 3 варианта:
- Использовать async в route .
- Использовать beforeEnter / beforeLeave в route.
- Использовать routesBeforeEnter / routesBeforeEnter во View.
Разница между stackPages во View и keepAlive в route :
- StackPages применяется на уровне View , т.е. для любого route в нем. Можно использовать во View свой набор routes . KeepAlive применяется на уровне route .
- 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 .
Буду рад критике!
