生命周期函数:
生命周期函数过程分为:创建前,创建后,挂载前,挂载后,更新前,更新后,销毁前,销毁后。
beforecreate:创建前 vue刚被创建时调用,此时所有变量和函数都未初始化完毕,在此函数下可以新增一些内容,跟着声明周期渲染。
created:创建后,变量和函数初始化完毕,没有向页面渲染,此处可以执行ajax,让获取的变量跟着渲染。
beforeMount:挂载前,此时el可以寻找到挂载点,开始渲染页面,此处也可以执行ajax
mounted:挂载后,此时第一次渲染完毕,此时可以操作dom
beforeUpdate:更新前,可以操作dom元素,拿到变量的新旧值进行对比
updated:更新后,此时变量更新完毕,可以拿到值做后续内容
beforeDestory:销毁前,可以手动删除一些变量和函数,比如解绑对象,销毁轮播图等。
destory:销毁后,组件下的任何信息都调用不到了,
vue3的声明周期
beforeCreate -> setup()
Create -> setup()
beforeMount -> onbeforeMount()
Mount -> onMount()
beforeUpdate -> onbeforeUpdate()
Updated -> onUpdated()
beforeDestory -> onbeforeUnmount()
destoryed -> onUnmounted()
子父组件的生命周期流程
父组件创建-父组件挂载-子组件创建-子组件挂载-子组件渲染-父组件渲染
beforeCreate:function(){
console.log("-----创建前-----")
console.log(this.$el)
},
created:function(){
console.log("-----创建后-----")
console.log(this.$el)
},
beforeMount:function(){
console.log("-----挂载前-----")
console.log(this.$el)
},
mounted:function(){
console.log("-----挂载后-----")
console.log(this.$el)
},
beforeUpdate:function(){
console.log("-----更新前-----")
console.log(this.$el)
},
updated:function(){
console.log("-----更新后-----")
console.log(this.$el)
},
beforeDestory:function(){
console.log("-----销毁前-----")
console.log(this.$el)
},
destory:function(){
console.log("-----销毁后-----")
console.log(this.$el)
}
执行结果: