【vue】vue的生命周期，uniapp的组件生命周期

一、 Vue的生命周期

beforeCreate	创建前	初始化但未加载监听拦截（正在初始化，但是数据还没有初始化完成）	此时获取data中的数据获取不到
created	创建后	初始化且加载监听拦截	可以获取到data中的数据，【多用于初始化数据】
beforeMount	挂载前	dom节点还未加载上树	还没有挂载到页面上
mounted	挂载后	dom节点已经挂载上树	挂载到页面上了，【多用于操作dom】
beforeUpdate	更新前	数据已修改，但还未加载到视图上
updated	更新后	数据已修改，并且视图dom已经更新
beforeDestory	销毁前	数据销毁前
destoryed	销毁后	数据销毁后	可以在删除的时候，消除定时器

二、生命周期的触发条件与作用

1、beforeCreate：在初始化事件后，但是还没拦截（所以此时修改数据，但是还没被拦截，所以没反应）
2、created：初始化注入，已经开始拦截—复杂数据的初始化
3、beforeMount：将vue组件编译成html代码，此时还没上树，无法访问到dom节点（可以作为初始化状态的最后一个机会）
4、mounted：vue实例创建完成，可以访问到dom节点
5、beforeUpdate：当状态被修改时
6、updated：状态修改完虚拟dom重新渲染，并且更新，可以访问到更新后的dom
7、beforeDestroy：在销毁之前
8、destroyed：销毁完成

三、代码

<template>
	<view>
	test
	</view>
	
</template>

<script>
	export default{
		data(){
			return {
				title:'hello',
 				interId:'null',
				
			}
		},
		beforeCreate() {
			//开始初始化，但是还未加载监听拦截，data中的数据还不能加载出来。
			console.log("beforeCreate:")
			console.log("data中的数据还不能加载出来:",this.title)
		},
		//初始化完成，监听拦截加载完成，data中的数据可以加载出来
		created(){
			console.log("created:")
			console.log("data中的数据可以加载出来了",this.title)
			this.interId=setInterval(()=>{
				console.log("执行定时器中....")
			},1000)
		},
		//dom还没有挂载到树上
		beforeMount(){
			console.log("beforeMount:")
			console.log(document.getElementById("name"))
		},
		//dom已经挂载到树上了
			
		mounted(){
			console.log("mounted:")
			console.log(document.getElementById("name"))
		},
		//销毁，可以关闭定时器
			 
		 destroyed(){
			 console.log("组件销毁了...")
			clearInterval(this.interId)
			 
		 },
		
	}
</script>

<style>
</style>