Vue组件生命周期钩子与父子组件生命周期如何相互影响和详解？

本文共计1433个文字，预计阅读时间需要6分钟。

目录 + Vue的生命周期钩子的介绍 + 父子组件的生命周期 + 加载渲染过程 + 父组件更新过程 + 子组件更新过程 + 父组件更新过程 + 销毁过程 + 代码示例 + created和mounted的区别 + Vue的生命周期钩子介绍

目录

• vue的生命周期钩子的介绍
• 父子组件的生命周期
• 加载渲染过程
• 父组件更新过程
• 子组件更新过程
• 父子组件更新过程
• 销毁过程
• 代码示例
• created和mounted的区别

vue的生命周期钩子的介绍

vue官网中提供的vue的生命周期钩子图

vue的生命周期可以分为8个阶段：

1、创建vue实例涉及的两个钩子

（1）beforeCreate：创建前，vue实例初始化之前调用。

此时的数据观察和事件配置都还没有准备好，而此时的实例中的data和el还是underfined状态，不可用的。Dom元素也未加载，此时还不能操作dom元素

（2）created:创建后，vue实例初始化之后调用

此时实例创建完成，可以访问data、mothods等属性。但是此时组件还没有挂载到页面上，所以依然不能访问dom元素。此阶段可以进行一个数据请求的操作。