其他分享
首页 > 其他分享> > uni-app生命周期小测

uni-app生命周期小测

作者:互联网

标签: js uni-app


前情

uni-app是我很喜欢的跨平台框架,它能开发小程序,H5,APP(安卓/iOS),对前端开发很友好,自带的IDE让开发体验也很棒,公司项目就是主推uni-app。

坑位

最近在开发一个需求,在组件中使用了onload生命周期,导致一直未生效的问题。

Why

官方文挡的介绍是像下面这样说的 文挡说明链接

uni-app 完整支持 Vue 实例的生命周期,同时还新增 应用生命周期 及 页面生命周期。

在平时开发项目中,页面和组件的写法是一模一样的,初看我以为所有组件都会有页面生命周期和vue自带的生命周期,其实不然,只能当vue组件当页面使用时,才会有页面生命周期。

解决方案

在组件里使用生命周期时,使用vue自带的生命周期即可。

测试

既然踩到这坑了,那何不做个简单测试。

关键代码

// App.vue关键测试代码如下
<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

// index.vue关键测试代码如下
<script>
	import helloWorld from '@/components/helloWorld.vue';
	export default {
		components:{
			helloWorld
		},
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {
			console.log("index onl oad");
		},
		onShow() {
			console.log("index onShow");
		},
		onReady() {
			console.log("index onReady");
		},
		onHide() {
			console.log("index onHide");
		},
		onUnload() {
			console.log("index onUnload");
		},
		beforeCreate() {
			console.log("index beforeCreate");
		},
		created() {
			console.log("index created");
		},
		beforeMount() {
			console.log("index beforeMount");
		},
		mounted() {
			console.log("index mounted");
		},
		beforeUpdate() {
			console.log("index beforeUpdate");
		},
		updated() {
			console.log("index updated");
		},
		beforeDestroy() {
			console.log("index beforeDestroy");
		},
		destroyed() {
			console.log("index destroyed");
		},
		methods: {
			changeTitle() {
				this.title += this.title;
			}
		}
	}
</script>

// 子组件helloWorld的关键测试代码如下
<script>
	export default {
		data() {
			return {
				test: "uni-app Hello Word"
			};
		},
		onLoad() {
			console.log("hellocomp onl oad");
		},
		onShow() {
			console.log("hellocomp onShow");
		},
		onReady() {
			console.log("hellocomp onReady");
		},
		onHide() {
			console.log("hellocomp onHide");
		},
		onUnload() {
			console.log("hellocomp onUnload");
		},
		beforeCreate() {
			console.log("hellocomp beforeCreate");
		},
		created() {
			console.log("hellocomp created");
		},
		beforeMount() {
			console.log("hellocomp beforeMount");
		},
		mounted() {
			console.log("hellocomp mounted");
		},
		beforeUpdate() {
			console.log("hellocomp beforeUpdate");
		},
		updated() {
			console.log("hellocomp updated");
		},
		beforeDestroy() {
			console.log("hellocomp beforeDestroy");
		},
		destroyed() {
			console.log("hellocomp destroyed");
		}
	}
</script>

测试结果

结论

标签:index,生命周期,小测,log,app,hellocomp,console,vue,uni
来源: https://www.cnblogs.com/xwwin/p/13580871.html