您的当前位置：首页正文

Vue 的父组件和子组件生命周期钩子函数执行顺序？

2024-11-07 来源：个人技术集锦

一、vue生命周期是什么？

我自己的理解，简单点讲Vue的生命周期就是用来描述一个组件从引入到退出的全部过程。详细点讲就是：Vue创建实例化对象，经历了数据初始化，挂载，更新等步骤后，最后被销毁。

二、生命周期钩子函数执行顺序？

1. 首先是数据加载渲染到页面，包括初始化阶段和挂载阶段

Vue实例化（new Vue()）-> 父组件beforeCreate -> 父组件 created -> 父组件 beforeMount -> 子组件 beforeCreate -> 子组件 created -> 子组件 beforeMount -> 真实DOM挂载完毕 -> 子组件 mounted -> 父组件 mounted

2. 其次当data里的数据发生了变化，进入更新阶段

父组件 beforeUpdate -> 子组件 beforeUpdate -> 子组件 updated -> 父组件 updated -> 获取更新后的真实DOM

3. 最后当$destroy()被调用进入销毁阶段

父组件 beforeDestroy -> 子组件 beforeDestroy -> 实例销毁后 -> 子组件 destroyed -> 父组件 destroyed