uni-app应用、页面、组件生命周期函数

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第25天，点击查看活动详情

uni-app生命周期函数可分为应用生命周期、页面生命周期和组件生命周期三种。

1 应用生命周期函数

应用生命周期仅在App.vue中监听，uni-app 支持如下应用生命周期函数：

 <script>
     // 只能在App.vue里监听应用的生命周期
     export default {
         onLaunch: function() {
             console.log('App Launch')
         },
         onShow: function() {
             console.log('App Show')
         },
         onHide: function() {
             console.log('App Hide')
         }
     }
 </script>

onLaunch函数，会在APP打开时，只运行一次，通常用于App系统版本检测；

2 页面生命周期函数

uni-app 支持如下页面生命周期函数：

3 组件生命周期函数

uni-app组件的生命周期等同Vue.js的生命周期

|---|---|
|beforeCreate|实例开始初始化时执行，此时无法访问data和页面元素|
|created|页面初始化完成时会执行的生命周期函数 ，可以获取到data中的响应式数据，通常我们会在这里做请求数据和数据绑定的操作，但这个声明周期是不能获取页面元素的因为组件还没挂载元素|
|beforeMount|组件挂载在页面之前执行的生命周期函数，使用较少|
|mounted|组件挂载完成后执行的生命周期函数，比较常用的生命周期，因为这个函数可以获取到页面元素|
|beforeUpdate|当data中的响应式数据发生变化时触发|
|updated|当data中的响应式数据发生变化后，先触发beforeUpdate，然后响应式数据会让页面重新渲染，然后渲染完成则执行updated|
|beforeDestroy|当组件开始销毁时触发的生命周期|
|destroyed|组件销毁完成后执行的生命周期|