uni-app组件生命周期_uniapp 组件生命

一.生命周期函数

二.实例代码

<template>
	<view id="myView">
		<view v-text="title"></view>
	</view>
</template>
 
<script>
	export default {
		data() {
			return {
				intId: null,
				num: 3,
				title: "Hello!"
			};
		},
		beforeCreate() {
			console.log("实例开始初始化")
			console.log(this.num) 
            //打印出undefined,说明数据未加载
		},
		created() {
			console.log(this.num) 
            //打印出3,说明数据已经加载,一般在created;里面进行数据初始化
			this.intId = setInterval(() => {
				console.log("定时器!")
			}, 1000)
		},
		beforeMount() {
			console.log(document.getElementById('myView')) 
            //打印出undefined,数据已经加载,但是未挂载到页面
		},
		mounted() {
			console.log(document.getElementById('myView')) 
            //打印出DOM元素,说明数据已经加载,并且挂载到页面
		},
		destroyed() {
			console.log("组件销毁")
			clearInterval(this.intId)
		}
	}
</script>
 
<style>
 
</style>