父子组件挂载时生命周期执行顺序
时间: 2023-05-11 16:05:56 浏览: 132
在 React 中,父组件和子组件的生命周期执行顺序如下:
1. 父组件的 constructor
2. 父组件的 componentWillMount
3. 父组件的 render
4. 子组件的 constructor
5. 子组件的 componentWillMount
6. 子组件的 render
7. 子组件的 componentDidMount
8. 父组件的 componentDidMount
注意:这只是一种常见的情况,具体的执行顺序可能会因为组件的不同而有所不同。
相关问题
vue 父子组件生命周期执行顺序
在Vue中,父子组件的生命周期钩子函数的执行顺序如下:
1. 父组件:
- beforeCreate:在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
- created:在实例创建完成后被立即调用。在这一步,实例已完成以下配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。
- beforeMount:在挂载开始之前被调用。相关的 render 函数首次被调用。
- mounted:el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。
- beforeUpdate:数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。可以在该钩子中对数据进行修改。
- updated:由于数据更改导致的虚拟 DOM 重新渲染和打补丁完成之后调用。
- beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用。
- destroyed:Vue 实例销毁后调用。此时,Vue 实例的所有指令都已解绑,所有事件监听器都已移除。
2. 子组件:
- beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed 这些生命周期钩子函数的执行顺序与父组件相同。
前端vue2父子组件的生命周期执行顺序
在Vue2中,父子组件的生命周期执行顺序如下:
1. 父组件的生命周期:
- beforeCreate:在实例初始化之后,数据观测和事件配置之前被调用。
- created:在实例创建完成后被调用,此时可以访问到数据和方法,但是还未挂载到DOM上。
- beforeMount:在挂载开始之前被调用,此时模板编译已完成,但是还未将模板渲染到页面上。
- mounted:在挂载完成后被调用,此时组件已经被渲染到页面上,可以进行DOM操作。
2. 子组件的生命周期:
- beforeCreate:同父组件的beforeCreate。
- created:同父组件的created。
- beforeMount:同父组件的beforeMount。
- mounted:同父组件的mounted。
3. 父组件更新时的生命周期:
- beforeUpdate:在数据更新之前被调用,此时可以对更新前的状态进行操作。
- updated:在数据更新之后被调用,此时DOM已经更新完毕。
4. 子组件更新时的生命周期:
- beforeUpdate:同父组件的beforeUpdate。
- updated:同父组件的updated。
5. 组件销毁时的生命周期:
- beforeDestroy:在实例销毁之前被调用,此时实例仍然完全可用。
- destroyed:在实例销毁之后被调用,此时实例已经被销毁,无法再访问到实例的数据和方法。