uni-app教程六（常用事件、生命周期）

谁践踏了优雅 2022-12-14 09:07 66阅读 0赞

### uniapp的生命周期 ###

#### 1. 应用级生命周期 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center]  
App.vue内定义的钩子函数就是`应用生命周期钩子函数`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 1]  
首次加载页面是触发  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 2]

### 2. 页面级生命周期 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 3]

<template>
        <view ref="ref" class="test-container">
            <text>{
       {message}}</text>
            <button @click="addMsg">点击</button>
        </view>
    </template>
    
    <script> import { mapState, mapMutations } from 'vuex'; var key = 0; export default { data() { return { message: 1 } }, computed: { }, methods: { addMsg() { this.message++ } }, beforeCreate() { console.group('beforeCreate 组件创建之前状态===============》'); console.log("%c%s", "color:red" , "el : " + this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message) }, onLoad() { console.group('onLoad 状态===============》'); console.log("%c%s", "color:red" , "el : " + this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message) }, onShow() { console.group('onShow 状态===============》'); console.log("%c%s", "color:red" , "el : " + this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message) }, onReady() { console.group('onReady 状态===============》'); console.log("%c%s", "color:red" , "el : " + this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message) }, onUnload() { console.group('onUnload 状态===============》'); console.log("%c%s", "color:red" , "el : " + this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message) }, created() { console.group('created 组件创建完毕状态===============》'); console.log("%c%s", "color:red","el : " + this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message); }, beforeMount() { console.group('beforeMount 组件挂载之前状态===============》'); console.log("%c%s", "color:red","el : " + (this.$el)); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message); }, mounted() { console.group('mounted 组件挂载完毕状态===============》'); console.log("%c%s", "color:red","el : " + this.$el); console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message); }, beforeUpdate() { console.group('beforeUpdate 组件更新之前状态===============》'); console.log("%c%s", "color:red","el : " + this.$el); console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message); }, updated() { console.group('updated 组件更新完毕状态===============》'); console.log("%c%s", "color:red","el : " + this.$el); console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message); }, beforeDestroy() { console.group('beforeDestroy 组件销毁之前状态===============》'); console.log("%c%s", "color:red","el : " + this.$el); console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message); }, destroyed() { console.group('destroyed 组件销毁完毕状态===============》'); console.log("%c%s", "color:red","el : " + this.$el); console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message) } } </script>
    
    <style lang="scss"> .test-container { width: 100%; height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; box-sizing: border-box; padding: 0upx 40upx; button { margin-top: 100upx; } } </style>

首次进入页面时：  
![在这里插入图片描述][20201013154005358.png_pic_center]  
点击按钮修改数据时：  
![在这里插入图片描述][20201013154049361.png_pic_center]

### 总结 ###

**Page页面生命周期函数执行顺序**

> beforeCreate => onLoad => onShow => created => beforeMount => onReady => mounted

**刷新数据后**

> beforeUpdate => updated

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/78486f7bf0494181b1e4f5e84325c172.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/bafd81134bfd493898c33ee5aa204f4f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/3acf4488838747e895ed8aa591fafa75.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/bf00619f4d2f448bb23483afdf0667cb.png
[20201013154005358.png_pic_center]: /images/20221123/182369a253984da28e0d9ddb8ac8fe25.png
[20201013154049361.png_pic_center]: /images/20221123/ff7064acd5cc4cd4ae670acf7173a7cb.png