vue组件的生命周期和父子组件生命周期执行顺序

什么是组件的生命周期？

一个组件从创建到销毁的整个过程就叫生命周期。

生命周期函数(钩子函数)

生命周期函数是vue框架的内置函数，随着组件的生命周期，自动按序执行。

作用

特定的时间点，执行某些特定的操作。

生命周期的四个阶段

初始化阶段

该阶段是为了创建组件，里面又有两个钩子函数，beforeCreate、created

beforeCreat==>创建前

created==>创建后，一般用于ajax发送请求

挂载阶段

该阶段是为了渲染显示组件，里面又有两个钩子函数，beforeMount、mounted

beforeMount==>挂载前

mounted==>挂载后，可以获取dom元素，用于操作dom元素

更新阶段

该阶段是为了修改变量刷新视图，里面又有两个钩子函数，beforeUpdate、updated

beforeUpdate==>更新前

updated==>更新后

销毁阶段

该阶段是为了把组件对象从内存删除，里面又有两个钩子函数，beforeDestroy、destroyed

beforeDestroy==>销毁前

destroyed==>销毁后，用于清除定时器，移出绑定的js事件

 

父子组件生命周期执行顺序

挂载阶段

父组件beforeCreate => 父组件created => 父组件beforeMount => 子组件beforeCreate => 子组件 created => 子组件beforeMount => 子组件mounted => 父组件mounted

更新阶段

父组件beforeUpdate => 子组件beforeUpdate => 子组件updated => 父组件updated

销毁阶段

父组件beforeDestroy => 子组件beforeDestroy => 子组件destroyed=> 父组件destroyed

总结

父子组件的生命周期的执行顺序是从外到内，再从内到外。