uni-app 生命周期

生命周期

• uni-app框架的生命周期结合了vue和微信小程序的生命周期
• 全局app使用onLaunch表示应用启动时 （第一类：全局）
• 页面中使用onLoad或者onShow分别表示页面加载完毕时和页面显示时（第二类：页面）
• 组件中使用mounted组件挂载完毕时（第三类：组件）

App.vue

<script>
	export default {
		onLaunch: function() {
			console.log('App Launch 应用启动')
		},
		globalData: {
			base: "www.360.com"
		}
	}
</script>

index.vue

<template>
    <view class="content">
        <my-form>
            <view>
                <!--第一步：定义标签-->
                <input type="text">
                <radio/>
                <checkbox />
            </view>
        </my-form>
    </view>
</template>

<script>
import myForm from "@/components/my-form";
export default {
    components: {
        myForm
    },
    onLoad() {
        console.log("onLoad 页面加载完毕");
    },
    onShow() {
        console.log("onShow 页面被看到");
    }
}
</script>

my-form.vue

<template>
    <view class="form">
        <view class="form_title">title</view>
        <view class="form_content">
            <slot></slot> <!-- 第二步： 定义slot-->
        </view>
    </view>
</template>

<script>
    export default {
        onLoad() { // 实际不生效（my-form是组件，不是页面）
            console.log("myForm onLoad");
        },
        mounted() {
            console.log("myForm mounted 组件挂载完毕");
        }
    }
</script>

my-form.vue中无法使用onLoad之类的生命周期函数，只能使用mounted。

生命周期参考资料

uni-app https://uniapp.dcloud.io/frame?id=生命周期
vue https://cn.vuejs.org/v2/guide/instance.html?生命周期图示
微信小程序 https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page-life-cycle.html