1.uni-app中的生命周期

文章目录

 

1.uniapp应用生命周期

2.uniapp页面的生命周期

3.uniapp组件的生命周期

---

1.uniapp应用生命周期

应用生命周期的例子说明（整个应用全部）在App.vue中调用
        1.onLaunch：初始化完成是触发（全局只触发一次）
        2.onShow：启动，或从后台进入前台显示
        3.从前台进入后台
        4.报错触发

// 应用的生命周期 在App.vue中调用
		//1.小程序启动之后，就会触发生命周期函数Launch（只会触发一次）
		onLaunch: function() {
			console.log('App Launch')
		},
		//2.当小程序显示的时候触发该生命周期Show函数（可以触发多次）
		onShow: function() {
			console.log('App Show')
		},
		//3.当小程序隐藏的时候触发该生命周期的hide函数
		onHide: function() {
			console.log('App Hide')
		},
		//4.异常触发:当小程序编译发生错误的时候回触发生命周期函数error函数
		onError:function(err){
			console.log('出现错误了~~~，App Error',err)
		}

2.uniapp页面的生命周期

页面的生命周期例子声明（一个独立页面）
         1.onLoad：监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面参数）（常用于——函数当页面一加载就调用该函数）
         2.onShouw：监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面（多次）
         3.onReady：监听页面初次渲染完成
         4.onHide：监听页面隐藏（多次）
         5.onUnload：监听页面卸载

// 页面生命周期函数：option表示上一个页面传来的值
		// 常用onLoad来加载数据
		onLoad(option) {
			console.log('页面加载了',option)//onLoad中的参数表示上一个页面传过来的参数
		},
		onShow(){
			console.log('页面显示了')
		},
		onReady() {
			console.log('页面初次渲染完成了')
		},
		onHide() {
			console.log('页面隐藏了')
		},
		methods: {
			toChange(){
				this.flag = !this.flag;/* 重点记住 */
			},
			childTofather(num){
				console.log("子组件传父组件，使用&emit('父事件')，要传的值",num);
				this.num=num
			}

3.uniapp组件的生命周期

组件的生命周期函数（vue的一样）
        1.beforeCreate：在实例化初始之后被调用
        2.created：在实例创建完成之后被立即调用
        3.beforeMount：在挂载开始之前被调用
        4.mounted：挂载到实例上去之后调用。此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后执行操作可以使用$nextTick
        5.beforeUpdate：数据更新时调用，发生在虚拟DOM打补丁之前
        6.updated：由于数据导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子
        7.beforeDestroy：实例销毁之前调用；在这之前，实例仍然完全可用
        8.destroyed：Vue实例销毁后调用。调用后，vue实例指示的所有东西都会解绑定，所有的监听器都会被移除，所有的子实例也会被销毁

//常用
beforeCreate() {
			console.log('beforeCreate()函数中实例化已经开始了，但是数据的渲染还没开始')
			console.log(this.num)
		},
		created() {
			console.log('created()可以看到数据初始化。也就是实例化',this.num)
		},
		beforeMount() {
			console.log('beforeMount()组件未挂载',document.getElementById('content'))
		},
		mounted() {
			console.log('mounted()组件挂载',document.getElementById('content'))
		},

 详情请移步到官网查看：https://uniapp.dcloud.io/collocation/frame/lifecycle