admin 管理员组文章数量: 887021
2023年12月16日发(作者：wxpython助手)
vue父子组件生命周期钩子函数执行顺序
是一款用于构建用户界面的渐进式JavaScript 框架，它将应用程序抽象成一个组件树，每个组件都可以拥有自己的状态和展示逻辑。在 中，组件可以分为父组件和子组件，父组件可以包含一个或多个子组件。
在 中，组件的生命周期可以分为创建阶段、挂载阶段、更新阶段和销毁阶段。Vue 父子组件的生命周期钩子函数执行顺序如下：
1.父组件的生命周期钩子函数执行顺序：
- beforeCreate：初始化父组件的数据之前。
- created：完成父组件的数据初始化，但还未开始模板渲染。
- beforeMount：在模板渲染之前被调用。
- mounted：模板渲染完成并挂载到页面上后调用。
2.子组件的生命周期钩子函数执行顺序：
- beforeCreate：初始化子组件的数据之前。
- created：完成子组件的数据初始化，但还未开始模板渲染。
- beforeMount：在模板渲染之前被调用。
- mounted：模板渲染完成并挂载到页面上后调用。
3.父组件重新渲染时的生命周期钩子函数执行顺序：
- beforeUpdate：在父组件重新渲染之前调用，可以在这里对父组件的数据进行更新。
- updated：在父组件重新渲染之后调用，表示模板已经重新渲染完成。
4.子组件重新渲染时的生命周期钩子函数执行顺序：
- beforeUpdate：在子组件重新渲染之前调用，可以在这里对子组件的数据进行更新。
- updated：在子组件重新渲染之后调用，表示模板已经重新渲染完成。
5.父组件销毁时的生命周期钩子函数执行顺序：
- beforeDestroy：在父组件销毁之前调用，可以在这里进行一些清理工作。
- destroyed：在父组件销毁之后调用，表示组件已经完全销毁。
6.子组件销毁时的生命周期钩子函数执行顺序：
- beforeDestroy：在子组件销毁之前调用，可以在这里进行一些清理工作。
- destroyed：在子组件销毁之后调用，表示组件已经完全销毁。
需要注意的是，在父组件重新渲染时，如果子组件的数据没有发生变化，则子组件的 beforeUpdate 和 updated 钩子函数将不会被触发。
根据以上逻辑，可以得到如下的流程图来表示 Vue 父子组件的生命周期钩子函数执行顺序：
```
beforeCreate
V
>------- beforeMount -------> mounted
/
/
yes no
/
VV
beforeUpdate
V
>-------- updated ----
/
/
yes no
/
VV
beforeDestroy ------
____，____________________
destroyed
```
可以看出，父组件的生命周期钩子函数的执行顺序是：beforeCreate
-> created -> beforeMount -> mounted -> beforeUpdate -> updated
-> beforeDestroy -> destroyed；子组件的生命周期钩子函数的执行顺序和父组件基本一致。
通过理解和掌握 Vue 父子组件生命周期钩子函数的执行顺序，可以更好地在应用中处理组件的数据初始化、更新和销毁等操作。
版权声明：本文标题：vue父子组件生命周期钩子函数执行顺序 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/free/1702717998h427933.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论