uni-app组件生命周期

一.生命周期函数

函数名	说明	平台差异
beforeCreate	在实例初始化之前被调用,数据没有初始化完成,页面没有开始渲染
created	实例创建完成立即调用,可以拿到数据和方法,进行数据初始化
beforeMount	在挂载开始之前被调用,未挂载
mounted	挂载到实例上被调用,已经渲染到页面
beforeUpdate	数据更新时调用,更新到页面之前,数据还未更新到页面	H5
updated	数据更改导致虚拟DOM重新渲染,数据更新到页面了	H5
beforeDestroy	实例销毁前调用
destroyed	实例销毁后调用

二.实例代码

<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>