contenido
¿Qué es el ciclo de vida?
Primero, en Vue cada instancia pasa por una serie de pasos de inicialización.
Cuando se crea, desde la configuración de los datos hasta la compilación de la plantilla, el montaje de la instancia en el DOM y, finalmente, la actualización del DOM cuando cambian los datos. Este proceso se denomina ciclo de vida de las instancias de Vue y, a medida que pasan por este proceso de creación y actualización del DOM, hay algunas funciones que se ejecutan en él de forma predeterminada. Es dentro de ellos que se crean y existen los componentes de Vue, y estas funciones se denominan enlaces de ciclo de vida.
El concepto de ciclo de vida en inglés no solo se aplica a tecnologías front-end como vue , react, etc., por supuesto, también existe en uni-app, al igual que la vida de una persona, desde el nacimiento hasta el lanzamiento, correspondiente a la código, un objeto Este proceso de crear, ejecutar y destruir se denomina ciclo de vida.
Preparación ambiental
Usamos el HBuilderX oficial para el desarrollo
Creamos un nuevo proyecto
Seleccione uni-app, elegimos la plantilla predeterminada para crearla
ciclo de vida de la aplicación uni
ciclo de vida de la aplicación
App.vueEn él se definen los Lifecycle Hooks de la aplicación : la función de enlace del ciclo de vida de la aplicación , simplemente decimos el ciclo de vida de la aplicación .
El ciclo de vida de la aplicación se utiliza para controlar el ciclo de vida global de toda la aplicación y monitorear el estado de inicialización, inicio y salida de la aplicación.
uni-appSe admiten los siguientes ciclos de vida de aplicaciones:
-
onLaunch : se activa cuando se completa la inicialización (solo se activa una vez globalmente). Por lo general, se usa para inicializar datos previos, como obtener información del usuario.
-
onShow : Iniciar o pasar del fondo a la pantalla de primer plano. Por ejemplo, la aplicación se colocó en segundo plano y ahora se ingresa desde el fondo. Se puede usar cuando los datos deben actualizarse cuando la página se abre por segunda vez.
-
onHide : Introduzca el fondo desde el primer plano. Por ejemplo, al usar la aplicación para volver al escritorio, la aplicación se colocará en segundo plano y se activará. Se puede usar para borrar el caché o proteger la privacidad.
Los anteriores se usan más comúnmente, pero los siguientes también son importantes -
onError : se activa cuando se informa un error.
-
onUniNViewMessage : Monitorea los datos enviados por la
nvuepágina . -
onUnhandledRejection : función de escucha para eventos de
Promiserechazo . -
onPageNotFound : la función de escucha cuando la página no existe.
-
onThemeChange : Escuche los cambios de tema del sistema. Si desea adaptar un tema oscuro para su aplicación, puede escuchar los cambios del tema del sistema en esta función y cambiar el tema del programa correspondiente.
Cabe señalar aquí que onLaunchsolo se activaonLaunch hooks una vez cuando se completa la inicialización global; los datos de Vue no se han cargado cuando se activa por primera vez, y en el código, se , y este , no se cargaron.uni-apponShowmounteddataDOM
Debido a que aquí está el ciclo de vida de la aplicación , escribimos contenido App.vuedentro . (Esto es solo un ejemplo y no representa un escenario de aplicación real)
<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>
ciclo de vida de la pagina
Ciclo de vida de la página Es decir: el ciclo de vida de una sola página, monitoreando el estado de carga de la página, visualización de la página, representación de la página, ocultación y descarga.
Ciclo de vida de la página Comúnmente utilizado onLoad: se ejecuta en la primera carga, solo se ejecuta una vez, generalmente se usa para hacer clic en el nivel anterior para ingresar al siguiente nivel y se usa cuando se deben pasar parámetros. onShow: se ejecuta cuando la página se carga por primera vez y también se activa cuando se regresa de una página secundaria.
uni-appLas funciones de enlace del ciclo de vida de la página comúnmente utilizadas son las siguientes:
-
onLoad : Supervisa la carga de la página, su parámetro son los datos pasados por la página anterior y el tipo de parámetro es Objeto.
-
onShow : supervisa la visualización de la página, que se activa cada vez que la página aparece en la pantalla, incluido el regreso de la página de nivel inferior para mostrar la página actual.
-
onReady : supervisa la finalización de la representación inicial de la página.
-
onHide : Escuche la ocultación de la página.
-
onUnload : escucha la descarga de la página.
-
onPullDownRefresh : escuche la acción desplegable del usuario, generalmente utilizada para la actualización desplegable.
Debido a que aquí está el ciclo de vida de la página , creamos una página /pages/Home/index.vuepara escribir contenido aquí.
<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>
Para onPullDownRefresh debe usarse así:
(Esto es solo un ejemplo y no representa un escenario de aplicación real)
pages.jsonDebe estar habilitado en la opción de estilo en enablePullDownRefresh.
- uni.startPullDownRefresh() : inicia la actualización desplegable de la página actual.
- uni.stopPullDownRefresh() : detiene la actualización desplegable de la página actual.
"pages": [
{
"style": {
"enablePullDownRefresh": true // 添加
}
}
],
onShow() {
// 开始下拉
uni.startPullDownRefresh();
},
onPullDownRefresh() {
// 4秒后关闭下拉
setTimeout(function () {
uni.stopPullDownRefresh();
}, 4000);
}
También hay un ciclo de vida de componentes, que es el ciclo de vida de Vue, que no se repetirá aquí.