[JavaScript知识库]Vue生命周期函数

生命周期函数：

生命周期函数过程分为：创建前，创建后，挂载前，挂载后，更新前，更新后，销毁前，销毁后。

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

执行结果：