Ne vous arrêtez pas à vue, explorez le cycle de vie d'uni-app

Quel est le cycle de vie ?

Tout d'abord, dans Vue, chaque instance passe par une série d'étapes d'initialisation.

Lors de sa création, de la définition des données à la compilation du modèle, au montage de l'instance sur le DOM et enfin à la mise à jour du DOM lorsque les données changent. Ce processus s'appelle le cycle de vie des instances de Vue, et au cours de ce processus de création et de mise à jour du DOM, certaines fonctions y sont exécutées par défaut. C'est à l'intérieur d'eux que les composants Vue sont créés et existent, et ces fonctions sont appelées crochets de cycle de vie.

Le concept de cycle de vie en anglais ne s'applique pas qu'aux technologies front-end telles que vue , react, etc., bien sûr, il existe aussi dans uni-app, tout comme la vie d'une personne, de la naissance à la sortie, correspondant au code, un objet Ce processus de création, d'exécution et de destruction est appelé le cycle de vie.

Préparation environnementale

Nous utilisons le HBuilderX officiel pour le développement

Nous créons un nouveau projet

Sélectionnez uni-app, nous choisissons le modèle par défaut pour le créer

cycle de vie uni-app

cycle de vie des applications

App.vueLes Lifecycle Hooks de l'application y sont définis : la fonction de hook du cycle de vie de l'application , on dit simplement le cycle de vie de l' application .

Le cycle de vie de l'application est utilisé pour contrôler le cycle de vie global de l'ensemble de l'application et surveiller l'état d'initialisation, de démarrage et de sortie de l'application.

uni-appLes cycles de vie d'application suivants sont pris en charge :

• onLaunch : déclenché lorsque l'initialisation est terminée (déclenché une seule fois globalement). Généralement utilisé pour initialiser les pré-données, telles que l'obtention d'informations sur l'utilisateur.

• onShow : Démarrer ou passer de l'arrière-plan à l'affichage de premier plan. Par exemple, l'application a été placée en arrière-plan, et maintenant elle est entrée depuis l'arrière-plan. Il peut être utilisé lorsque les données doivent être rafraîchies lorsque la page est ouverte pour la deuxième fois.

• onHide : Entrez l'arrière-plan à partir du premier plan. Par exemple, lorsque vous utilisez l'application pour revenir au bureau, l'application sera placée en arrière-plan et se déclenchera. Peut être utilisé pour vider le cache ou protéger la confidentialité.

  Les éléments ci-dessus sont plus couramment utilisés, mais les éléments suivants sont également importants

• onError : déclenché lorsqu'une erreur est signalée.

• onUniNViewMessage : Surveille les données envoyées par la nvuepage .

• onUnhandledRejection : fonction d'écoute pour les événements de Promiserejet gérés.

• onPageNotFound : La fonction d'écoute lorsque la page n'existe pas.

• onThemeChange : Écoutez les changements de thème du système. Si vous souhaitez adapter un thème sombre à votre application, vous pouvez écouter les changements de thème système dans cette fonction et changer le thème de programme correspondant.

Il convient de noter ici qu'il n'est déclenché qu'une onLaunchseule fois lorsque l'initialisation globale est terminée ; les données de Vue n'ont pas été chargées lorsqu'il est déclenché pour la première fois, et dans le code, il est , et celui-ci , ne s'est pas chargé.onLaunch hooksuni-apponShowmounteddataDOM

Parce que voici le cycle de vie de l' application , nous écrivons donc du contenu à l' App.vueintérieur . (Ceci n'est qu'un exemple et ne représente pas un scénario d'application réel)

<script>
    export default {
      
      
        data() {
      
      
            return {
      
      
            latest_data_timer: 0,
            stop_time: 0,
            };
        },
        methods: {
      
      
            // 假设这是某些信息的 API
            getNowUserInfo() {
      
      
                return {
      
      
                    user: "我想养只猫",
                    webSite: "uiuing.com",
                    token: "123abclkd",
                };
            },
            // 假设通过这个方法一直在加载数据
            latestData() {
      
      
            this.latest_data_timer = setInterval(() => {
      
      
                    console.log("Now user info：", this.getNowUserInfo());
                }, 2000);
            },
        },
        onLaunch: function () {
      
      
            console.log("欢迎您的使用，我只加载一次～");
        },
        onShow: function () {
      
      
            console.log("开始加载数据，注意此时vue数据没加载完");

            // 告知数据暂停了多久
            if (this.stop_time) {
      
      
            let load_interval_time = new Date().getTime() - this.stop_time;
            console.log("数据暂停了：", load_interval_time / 1000, "秒");
            }

            // 开始加载
            this.latestData();
        },
        onHide: function () {
      
      
            console.log("检测到App在后台，暂停内容加载");

            // 记录暂停时的时间戳
            this.stop_time = new Date().getTime();

            // 暂停加载
            clearInterval(this.latest_data_timer);
        },
    };
</script>

cycle de vie des pages

Cycle de vie de la page C'est-à-dire : le cycle de vie d'une seule page, en surveillant l'état du chargement de la page, l'affichage de la page, le rendu de la page, le masquage et le déchargement.

Cycle de vie de la page Couramment utilisé onLoad: exécuté au premier chargement, exécuté une seule fois, généralement utilisé pour cliquer sur le niveau précédent pour entrer dans le niveau suivant, et utilisé lorsque des paramètres doivent être passés. onShow: Exécuté lors du premier chargement de la page, et également déclenché lors du retour d'une page secondaire.

uni-appLes fonctions de hook de cycle de vie de page couramment utilisées sont les suivantes :

• onLoad : Surveille le chargement de la page, son paramètre est les données transmises par la page précédente, et le type de paramètre est Object.

• onShow : Surveille l'affichage de la page, qui se déclenche à chaque fois que la page apparaît à l'écran, y compris en revenant de la page de niveau inférieur pour révéler la page en cours.

• onReady : Surveille l'achèvement du rendu initial de la page.

• onHide : écoute le masquage de page.

• onUnload : écoute le déchargement de la page.

• onPullDownRefresh : écoute l'action déroulante de l'utilisateur, généralement utilisée pour l'actualisation déroulante.

Parce qu'ici c'est le cycle de vie de la page , on crée donc une page /pages/Home/index.vuepour écrire du contenu ici.

<template>
  <view></view>
</template>

<script>
	export default {
      
      
		onReady() {
      
      
			console.log("页面初次渲染完成");
		},
		onLoad() {
      
      
			console.log("页面加载动作");
		},
		onShow() {
      
      
			console.log("页面显示动作");
		},
		onHide() {
      
      
			console.log("页面隐藏动作");
		},
		onUnload() {
      
      
			console.log("页面关闭动作");
		},
		onPageScroll() {
      
      
			console.log("页面滚动动作");
		},
	};
</script>

<style></style>

Pour onPullDownRefresh doit être utilisé comme ceci :

(Ceci n'est qu'un exemple et ne représente pas un scénario d'application réel)

Il pages.jsondoit être activé dans l'option de style dans enablePullDownRefresh.

• uni.startPullDownRefresh() : démarre l'actualisation déroulante de la page actuelle.
• uni.stopPullDownRefresh() : Arrête l'actualisation déroulante de la page en cours.

"pages": [
        {
    
    
            "style": {
    
    
                "enablePullDownRefresh": true // 添加
            }
        }
    ],

onShow() {
    
    
    // 开始下拉
    uni.startPullDownRefresh();
},
onPullDownRefresh() {
    
    
    // 4秒后关闭下拉
    setTimeout(function () {
    
    
            uni.stopPullDownRefresh();
    }, 4000);
}

Il existe également un cycle de vie des composants, qui est le cycle de vie de Vue, qui ne sera pas repris ici.