父组件和子组件的生命周期执行顺序
时间: 2023-09-21 09:04:29 浏览: 33
父组件和子组件的生命周期执行顺序是先执行父组件的生命周期,然后再执行子组件的生命周期。在组件的生命周期过程中,父组件会在componentDidMount方法中渲染子组件,在此之后会依次触发子组件的生命周期函数。当然,在组件的更新过程中,也会遵循这个顺序,也就是先执行父组件的更新,再执行子组件的更新。
相关问题
父组件和子组件之间的生命周期执行顺序
父组件和子组件的生命周期执行顺序如下:
1. 父组件的constructor()函数被调用
2. 父组件的componentWillMount()函数被调用
3. 父组件的render()函数被调用,返回子组件
4. 子组件的constructor()函数被调用
5. 子组件的componentWillMount()函数被调用
6. 子组件的render()函数被调用
7. 子组件的componentDidMount()函数被调用
8. 父组件的componentDidMount()函数被调用
在更新时,父组件会先执行更新生命周期函数,然后再执行子组件的更新生命周期函数:
1. 父组件的shouldComponentUpdate(nextProps, nextState)函数被调用,返回true或false
2. 如果shouldComponentUpdate()返回true,则父组件的componentWillUpdate(nextProps, nextState)函数被调用
3. 父组件的render()函数被调用,返回更新后的子组件
4. 子组件的shouldComponentUpdate(nextProps, nextState)函数被调用,返回true或false
5. 如果子组件的shouldComponentUpdate()返回true,则子组件的componentWillUpdate(nextProps, nextState)函数被调用
6. 子组件的render()函数被调用
7. 子组件的componentDidUpdate(prevProps, prevState)函数被调用
8. 如果子组件的componentDidUpdate()返回true,则父组件的componentDidUpdate(prevProps, prevState)函数被调用。
父组件和子组件生命周期钩子的执行顺序
在Vue中,父组件和子组件的生命周期钩子的执行顺序如下:
父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted
具体来说,父组件的beforeCreate钩子会在创建实例之前执行,然后是父组件的created钩子,在实例创建完成后执行。接下来,父组件会执行beforeMount钩子,表示即将开始挂载到页面上。在beforeMount钩子执行完毕后,子组件的beforeCreate钩子会被执行,然后是子组件的created钩子。接着,子组件会执行beforeMount钩子,表示即将开始挂载到页面上。最后,子组件的mounted钩子会在子组件挂载到页面上之后执行,而父组件的mounted钩子会在所有子组件都挂载完成后执行。这样,就完成了整个父组件和子组件生命周期钩子的执行顺序。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [深入理解Vue父子组件生命周期执行顺序及钩子函数](https://download.csdn.net/download/weixin_38723691/12954213)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [父子组件生命周期执行顺序](https://blog.csdn.net/weixin_51465106/article/details/125729960)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]