uni的生命周期

uni的生命周期

• 生命周期的概念：一个对象从创建、运行、销毁的整个过程被成为生命周期。
• 生命周期函数：在生命周期中每个阶段会伴随着每一个函数的触发，这些函数被称为生命周期函数

应用生命周期

• 应用生命周期仅可在App.vue中监听，在其它页面监听无效。

• 应用生命周期参考

• 定义在App.vue

<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')//不重新运行就不会再显示这个app launch
		},
		onShow: function() {
			console.log('App Show')//重新运行后和
		},
		onHide: function() {
			console.log('App Hide') //隐藏后显示后才会调用
		},
		onError:function(err){
			console.log('出异常了',err) //捕获异常并打印
		}
	}
</script>

页面的生命周期

• 页面周期函数参考
• 定义在页面内的script（index.vue）

<script>
		onLoad(options) {
			console.log('页面加载了',options)
		},
		onShow() {
			console.log('页面显示了')
		},
		onReady() {
			console.log('页面初次渲染完成')
		},
		onHide() {
			console.log('页面隐藏了')
		},
		methods:{
			checkTest(){
				this.flag = !this.flag
			}
		},
	}
</script>

组件的生命周期

• 组件生命周期函数列表
• 组件生命周期图示
• 定义在components组件目录的组件文件中

<script>
	export default {
		name:"test",
		data() {
			return {
				num: 3,
				intId: null
			};
		},
		beforeCreate() {//在实例被初始化后被直接调用
			console.log("实例被初始化了")//数据还没被初始化
			console.log(this.num) 
		},
		//一般在created里面进行数据初始化
		created() {
			console.log('created',this.num) 
			this.intId = setInterval(()=>{
				console.log('执行定时器')
			},1000)
		},
		beforeMount() {
			console.log('beformount',document.getElementById('myView'))
		},
		//操作dop
		mounted() {
			console.log('monunted',document.getElementById('myView'))
		},
		destroyed(){
			console.log('组件销毁了')
			clearInterval(this.intId)
		}
		
	}
</script>