详解uni-app框架的生命周期

概要

对uni-app日常开发重要概念梳理和讲解；最基础的内容，开发中虽然是最少用到的，但也是最重要的内容。

一、生命周期函数

• 在项目运行过程中，各个阶段执行的回调函数成为生命周期钩子函数，如：onLaunch，onMounted函数；

• 在合适的时机做合适的任务，也就是对应的回调函数执行;

• 在vue项目中，使用的只是vue实例的生命周期；

• uni-app不仅支持vue实例的生命周期，还新增了其他的生命周期，主要是支持微信官方的生命周期函数；

二、uni-app生命周期分类

• 应用生命周期

• 官网文档地址

• https://uniapp.dcloud.net.cn/collocation/App.html#applifecycle

• 应用生命周期仅可在App.vue中监听，在页面监听无效果；

• App.vue是uni-app的主组件，所有页面都是在App.vue下进行切换的，是页面入口文件。但App.vue本身不是页面，所以不能编写视图元素，没有< template >标签

• 页面生命周期

• 官网文档地址

• https://uniapp.dcloud.net.cn/tutorial/page.html#lifecycle

• 支持vue标准的生命周期函数，同时新增了很多其他的生命周期函数

• 在page目录下配置的页面文件才能生效

• uni-app会将 pages.json ==> pages 配置项中的第一个页面，作为当前工程的首页（启动页）

• 组件生命周期

• 与vue标准组件的生命周期函数相同；（beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed）

• 没有页面级新增的onLoad等生命周期函数；

三、uni-app应用生命周期函数

• onPageNotFound

• 找不到url对应的页面文件时执行；常用于用户访问不存在页面，引导用户到其他可访问页面

onPageNotFound(() => {
  uni.navigateTo({
    url:'/pages/404/index'
  })
})

四、详解uni-app新增的页面生命周期函数

• onPullDownRefresh

• 在对应页面中增加此函数，用户在app和小程序中下拉操作时执行;

onPullDownRefresh(() => {
  console.log('页面刷新了');
})

// pages.json

对应页面配置 "enablePullDownRefresh": true

{
  "pages": [{
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",//设置页面标题文字
        "enablePullDownRefresh":true//开启下拉刷新
      }
    },
    ...
  ]
}