当前位置:   article > 正文

UniApp中的所有生命周期钩子函数以及使用方法_uniapp生命周期钩子函数

uniapp生命周期钩子函数

      当使用UniApp开发框架时,你可以利用一些生命周期钩子函数来控制页面和组件的初始化、加载和销毁过程。以下是UniApp中的所有生命周期钩子函数以及使用方法和注释解析:

一、应用生命周期钩子

  • onLaunch(options):应用初始化时触发,全局只触发一次。
  1. App({
  2. onLaunch: function(options) {
  3. // 应用初始化时执行的代码
  4. }
  5. })
  • onShow(options):应用启动或从后台进入前台时触发。
  1. App({
  2. onShow: function(options) {
  3. // 应用从后台进入前台时执行的代码
  4. }
  5. })
  • onHide():应用从前台进入后台时触发。
  1. App({
  2. onHide: function() {
  3. // 应用从前台进入后台时执行的代码
  4. }
  5. })

二、页面生命周期钩子

  • onLoad(options):页面加载时触发,可以获取页面参数。
  1. export default {
  2. onLoad(options) {
  3. // 页面加载时执行的代码,可以使用options参数获取页面参数
  4. }
  5. }
  • onShow():页面显示时触发。
    
  1. export default {
  2. onShow() {
  3. // 页面显示时执行的代码
  4. }
  5. }
  • onReady():页面初次渲染完成时触发。
  1. export default {
  2. onReady() {
  3. // 页面初次渲染完成时执行的代码
  4. }
  5. }
  • onHide():页面隐藏时触发。
  1. export default {
  2. onHide() {
  3. // 页面隐藏时执行的代码
  4. }
  5. }
  • onUnload():页面卸载时触发。
  1. export default {
  2. onUnload() {
  3. // 页面卸载时执行的代码
  4. }
  5. }

三、组件生命周期钩子

  • beforeCreate():组件实例刚刚被创建,属性计算和方法定义之前触发。
  1. export default {
  2. beforeCreate() {
  3. // 组件实例被创建时执行的代码
  4. }
  5. }
  • created():组件实例已经创建完成,属性已经绑定,但尚未替换真实的DOM之前触发。
  1. export default {
  2. created() {
  3. // 组件实例创建完成时执行的代码
  4. }
  5. }
  • beforeMount():组件挂载开始之前执行。
  1. export default {
  2. beforeMount() {
  3. // 组件挂载开始之前执行的代码
  4. }
  5. }
  • mounted():组件挂载到页面之后执行。
  1. export default {
  2. mounted() {
  3. // 组件挂载到页面之后执行的代码
  4. }
  5. }
  • beforeUpdate():组件更新开始之前执行。
  1. export default {
  2. beforeUpdate() {
  3. // 组件更新开始之前执行的代码
  4. }
  5. }
  • updated():组件更新完成之后执行。
  1. export default {
  2. updated() {
  3. // 组件更新完成之后执行的代码
  4. }
  5. }
  • beforeDestroy():组件销毁前执行。
  1. export default {
  2. beforeDestroy() {
  3. // 组件销毁前执行的代码
  4. }
  5. }
  • destroyed():组件销毁后执行。
  1. export default {
  2. destroyed() {
  3. // 组件销毁后执行的代码
  4. }
  5. }

       这些生命周期钩子函数可以根据需要在对应的页面或组件中定义,并在特定的时机自动触发。通过使用这些钩子函数,你可以在不同的阶段执行相应的操作,如初始化数据、发送网络请求、更新页面状态等。请根据具体需求选择适合的钩子函数,并在其回调函数中编写相应的代码逻辑。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/羊村懒王/article/detail/318596
推荐阅读
相关标签
  

闽ICP备14008679号