生命周期

发布时间 2023-10-19 16:03:16作者: songxia777

Vue生命周期

beforeCreate

在beforeCreate阶段 ,vue实例的挂载元素el和数据对象data都为undefined ,还未初始化 ,也就是说此时我们还拿不到数据

此时页面开始创建 ,可以加loading……事件 ,加载实列时触发

created

在created阶段 ,vue实例的数据对象data有了 ,但是实例对象el还没有 ,也就是说可以拿到数据 ,但是无法获取Dom节点 ,此时data 和 methods已经可以使用 但是页面还没有渲染出来

数据 一些异步请求的调用 ,loading……事件结束等

beforeMount

在beforeMount阶段 ,vue实例的$el和data都初始化了 ,但还是挂载之前的虚拟DOM节点 ,此时实例尚未挂载完成 ,此时页面上还看不到真实数据 只是一个模板页面而已

mounted

在mounted阶段 ,vue实例挂载完成 ,页面成功渲染数据已经真实渲染到页面上 在这个钩子函数里面我们可以使用一些第三方的插件
mounted 获取Dom节点操作DOM ,在这个钩子函数里面我们可以使用一些第三方的插件实例写在这个函数内

beforeUpdate

在beforeUpdate 阶段 ,数据更新时调用,发生在虚拟DOM打补丁之前。 页面上数据还是旧的

updated

在updated阶段 ,由于数据更改导致的虚拟DOM重新渲染和打补丁,在这之后会调用该钩子。 页面上数据已经替换成最新的
updated 做一些数据统一更新处理的相应函数

beforeDestroy

beforeDestroy在实例销毁之前调用 ,在这一步,实例仍然完全可用

destroyed

destroyed 实例销毁后调用。该钩子被调用后,对应 Vue 实例的所有指令都被解绑,所有的事件监听器被移除,所有的子实例也都被销毁。

uniapp页面生命周期

uni-app 页面除支持 Vue 组件生命周期外还支持下方页面生命周期函数

onInit

监听页面初始化,其参数同 onLoad 参数,为上个页面传递的数据,参数类型为 Object(用于页面传参),触发时机早于 onLoad

仅百度小程序基础库 3.260 以上支持 onInit 生命周期
其他版本或平台可以同时使用 onLoad 生命周期进行兼容,注意避免重复执行相同逻辑
不依赖页面传参的逻辑可以直接使用 created 生命周期替代onLoad

onLoad

监听页面加载,该钩子被调用时,响应式数据、计算属性、方法、侦听器、props、slots 已设置完成,其参数为上个页面传递的数据,参数类型为 Object(用于页面传参)

onLoad比较适合的操作是:接受上页的参数,联网取数据,更新data
但onLoad里不适合进行大量同步耗时运算,因为此时转场动画还没开始

onShow

监听页面显示,页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面

onReady

监听页面初次渲染完成,此时组件已挂载完成,DOM 树($el)已可用,注意如果渲染速度快,会在页面进入动画完成前触发

onReady后,页面元素就可以自由操作了,比如ref获取节点。同时首批界面也渲染了

onHide

监听页面隐藏

onUnload

监听页面卸载

onResize

监听窗口尺寸变化 (App、微信小程序、快手小程序有差异)

onPullDownRefresh

监听用户下拉动作,一般用于下拉刷新

onReachBottom

页面滚动到底部的事件(不是scroll-view滚到底),常用于下拉下一页数据

onTabItemTap

点击 tab 时触发,参数为Object

onShareAppMessage

用户点击右上角分享

onPageScroll

监听页面滚动,参数为Object

onNavigationBarButtonTap

监听原生标题栏按钮点击事件,参数为Object

onBackPress

监听页面返回,返回 event = {from:backbutton、 navigateBack} ,backbutton 表示来源是左上角返回按钮或 android 返回键;navigateBack表示来源是 uni.navigateBack

onShareTimeline

监听用户点击右上角转发到朋友圈

onAddToFavorites

监听用户点击右上角收藏

小程序生命周期

应用生命周期

onLaunch:小程序初始化

在小程序初始化时,会触发onLaunch生命周期函数。一般用于进行全局数据的初始化和获取,例如获取用户信息、检查登录状态等

onShow:小程序启动或切换到前台

当小程序启动或从后台切换到前台时,会触发onShow生命周期函数。在这个阶段,可以执行一些需要实时更新的操作,比如获取用户位置、更新数据等

onHide:小程序切换到后台

小程序切换到后台时,会触发onHide生命周期函数。在这个阶段,可以进行一些清理操作,比如保存用户数据、停止定时器等

onError:小程序发生错误

当小程序发生错误时,会触发onError生命周期函数。一般用于捕捉并处理小程序运行时的异常情况,例如网络请求失败、数据解析错误等

页面生命周期

页面生命周期指的是小程序中每个页面从加载到销毁的整个过程

onLoad - 页面加载

页面加载时,会触发onLoad生命周期函数。一般在这个阶段进行页面初始化和数据加载的操作,例如请求数据、初始化参数等

onShow - 页面显示

当页面显示时,会触发onShow生命周期函数。一般用于执行一些需要实时更新的操作,比如更新数据、刷新界面等

onReady - 页面初次渲染完成

当页面初次渲染完成时,会触发onReady生命周期函数。一般用于执行一些只能在页面初次渲染完成后才能进行的操作,比如操作 DOM 元素、绑定事件等

onHide - 页面隐藏

当页面隐藏时,会触发onHide生命周期函数。一般用于执行一些页面隐藏时需要处理的操作,比如停止动画、清除定时器等

onUnload - 页面卸载

当页面被卸载时,会触发onUnload生命周期函数。一般用于执行一些页面卸载时需要处理的操作,比如释放资源、取消订阅等

组件生命周期

组件生命周期指的是小程序中自定义组件从创建到销毁的整个过程

created - 组件实例被创建

当组件实例被创建时,会触发created生命周期函数。在这个阶段,可以进行一些组件实例的初始化操作

attached - 组件被添加到页面节点树

当组件被添加到页面节点树时,会触发attached生命周期函数。一般用于执行一些组件加载和渲染的操作

ready - 组件初次渲染完成

当组件初次渲染完成时,会触发ready生命周期函数。一般用于执行一些只能在组件初次渲染完成后才能进行的操作

detached - 组件被从页面节点树移除

当组件被从页面节点树移除时,会触发detached生命周期函数。一般用于执行一些组件卸载和清理的操作