Недавно я использовал mpvue для создания и разработки небольшого программного проекта для компании, и на выходных я потратил некоторое время на изучение последовательности вызовов жизненного цикла компонента Vue.js и жизненного цикла страницы апплета.
текст
подготовить знания
Сначала официальная схема жизненного цикла mpvue:
Есть только один апплетApp 实例, соответствующий проекту mpvueApp.vueКонтент внутри, вся страница общая, mpvue это экземпляр и组件(Компоненты включают:tabBar 页,普通页,一般组件) добавляет некоторые методы жизненного цикла Vue.js.
Конечно, эти жизненные циклы неApp 实例а также组件в целом.
между страницами
экземпляр приложения
Его жизненный цикл всегда выполняется первым в следующем порядке:beforeCreate,created,onLaunch,beforeMount,mounted,onShow(В следующих примерах эта часть содержания опущена).
страница
App.vue
|--- Page0.vue（默认打开页面）
Page0.vueВыполнить последовательно:
beforeCreatecreatedonLoadonShowonReadybeforeMountmounted
несколько страниц
// app.json（注意顺序）
{
pages: [
'/pages/Page0/main',
'/pages/Page2/main',
'/pages/Page1/main',
]
}
// 页面结构
App.vue
|--- Page0.vue（默认页面）
|--- Page1.vue
|--- Page2.vue
Регистрация на встречу по запуску небольшой программыapp.jsonизpagesВсе страницы, определенные в свойстве, и активировать каждую страницуbeforeCreate,created,а также这对函数Порядок выполнения зависит от страницы, на которойpagesпорядок в свойствах.
Чтобы запустить апплет, вы должны открыть домашнюю страницу (эта домашняя страница должна быть вpages), страницыonLoad~mountedнаходится на последней страницеcreatedПосле этого выполните:
Переход между страницами (также называемый переключением маршрута)
Разделение страницы:tabBar 页а также普通页Пропускает между двумяограничение:
- navigationTo, redirectTo может открывать только страницы без tabBar
- switchTab может открывать только страницы tabBar
Все триггеры в таблице по порядку,
-Тот, что в начале, означает, что он срабатывает только при первом входе.+Начало означает, что он будет срабатывать при повторном входе.Если нет символа, он будет срабатывать при каждом входе.
1.open-type="navigate":
| Текущая страница | целевая страница | триггер текущей страницы | триггер целевой страницы |
|---|---|---|---|
| нормальная страница | нормальная страница | onHide | onLoad onShow onReady beforeMount + beforeUpdate mounted |
| нормальная страница | страница tabBar | onUnload | - onLoad onShow - onReady - beforeMount - mounted |
| страница tabBar | нормальная страница | onHide | onLoad onShow onReady beforeMount + beforeUpdate mounted |
| страница tabBar | страница tabBar | onHide | - onLoad onShow - onReady - beforeMount - mounted |
2.open-type="redirect":
| Текущая страница | целевая страница | триггер текущей страницы | триггер целевой страницы | иллюстрировать |
|---|---|---|---|---|
| нормальная страница | нормальная страница | onUnload | onLoad onShow onReady beforeMount + beforeUpdate mounted |
|
| нормальная страница | страница tabBar | не поддерживается | ||
| страница tabBar | нормальная страница | onUnload | onLoad onShow onReady beforeMount mounted |
|
| страница tabBar | страница tabBar | не поддерживается |
3.open-type="reLaunch":
| Текущая страница | целевая страница | триггер текущей страницы | триггер целевой страницы |
|---|---|---|---|
| нормальная страница | нормальная страница | onUnload | onLoad onShow onReady beforeMount + beforeUpdate mounted |
| нормальная страница | страница tabBar | onUnload | + onUnload onLoad onShow onReady beforeMount + beforeUpdate mounted |
| страница tabBar | нормальная страница | onUnload | onLoad onShow onReady beforeMount + beforeUpdate mounted |
| страница tabBar | страница tabBar | onUnload | onLoad onShow onReady beforeMount + beforeUpdate mounted |
Если вы повторно запустите текущую страницу, страница, поддерживаемая платформой апплета в виде стека, будет последовательно извлекаться из стека и запускать onUnload страницы, а затем запускать текущую страницу:
- onLoad
- onShow
- onReady
- beforeMount
- beforeUpdate
- mounted
4.open-type="navigateBack", нужно сотрудничатьdeltaиспользование атрибута, он ведет себя, как описано нижеверхняя левая кнопка назад.
- дельта превышает
页面栈количество, вернуться на первую страницу - Когда дельта
5.tabBar нажмите переключатель
| триггер текущей страницы | триггер целевой страницы |
|---|---|
| onHide | - onLoad onShow - onReady - beforeMount - mounted |
6.верхняя левая кнопка назад
Эта кнопка только普通页существуют в
| триггер текущей страницы | триггер целевой страницы |
|---|---|
| onUnload | onShow |
наконец
onLaunchа такжеonErrorсуществует только вApp 实例, другие страницы или компоненты заменяютonLaunchдаonLoad,нетonError
Исходный код демоЗдесь я найду время для изучения связи между их жизненными циклами и асинхронной обработкой данных, когда на странице используются общие компоненты.