Uni-app学习从0到1开发一个app——(4)生命周期

---

0 引入

uin-app生命周期是以小程序的生命周期为基础实现的，分为应用生命周期、页面生命周期、和组件生命周期，其中组件生命周期就是Vue的生命周期。

官方文档可见：https://uniapp.dcloud.net.cn/tutorial/page.html#lifecycle

---

1、应用生命周期

补充说明：
1、App.vue是uni-app的主组件，所有页面都是在App.vue下进行切换的，是页面入口文件。App.vue本身不是页面，这里不能编写视图元素，也就是没有。这个文件的作用包括：调用应用生命周期函数、配置全局样式、配置全局的存储globalData。应用生命周期仅可在App.vue中监听，在页面监听无效
2、尽量不要在onLaunch钩子函数中进行页面跳转，如果进行页面跳转，可能会出现白屏报错的问题，其原因可能会与pages.json内配置的第一个页面跳转时出现的冲突，可以使用延迟进行跳转处理。
3、onPageNotFound 页面实际上已经打开了（比如通过分享卡片、小程序码）且发现页面不存在，才会触发，api 跳转不存在的页面不会触发（如 uni.navigateTo）；
4、小程序有globalData，这是一种简单的全局变量机制。这套机制在uni-app里也可以使用，并且全端通用。

<script>  
    export default {
    
      
        globalData: {
    
      
            text: 'text'  
        }
    }  
</script>  

---

2、页面生命周期

---

3、组件生命周期

组件的生命周期写在components文件夹下，和标准的Vue标准组件周期相同其函数如下：

函数	作用
beforeCreate	实例已经开始初始化之后调用 【数据初始化未完成，页面没有开始渲染】
created	实例创建完成之后调用 【组件创建完成，不代表组件已挂载到页面】
beforeMount	在挂载开始之前被调用。
mounted	挂载到实例上去之后调用。 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用$nextTickVue官方文档
beforeUpdate	数据更新时调用，发生在虚拟 DOM 打补丁之前。 仅H5平台支持
updated	由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。 仅H5平台支持
beforeDestroy	实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed	Vue实例销毁后调用。调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

---

4、引用

见文章内

---