第 78 题：Vue 的父组件和子组件生命周期钩子执行顺序是什么

[zeroone001]

1. 父组建： beforeCreate -> created -> beforeMount
2. 子组件： -> beforeCreate -> created -> beforeMount -> mounted
3. 父组件： -> mounted
4. 总结：从外到内，再从内到外

[luchx]

1. 加载渲染过程
   父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
2. 子组件更新过程
   父beforeUpdate->子beforeUpdate->子updated->父updated
3. 父组件更新过程
   父beforeUpdate->父updated
4. 销毁过程
   父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

[zxcweb]

1.首次加载过程
父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount ->
子mounted -> (子activated) -> 父mounted
2.父组件更新过程
父beforeUpdate -> (子deactivated) -> 父updated
3.子组件更新过程
父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated
4.销毁过程
父beforeDestroy-> 子beforeDestroy -> 子destroyed -> 父destroyed

[usecodelee]

https://www.cnblogs.com/yuliangbin/p/9348156.html

[lgh757079506]

和事件流好像啊

[ryouaki]

Note that mounted does not guarantee that all child components have also been mounted. If you want to wait until the entire view has been rendered, you can use vm.$nextTick inside of mounted:

^_^

在vue里面父的mounted并不一定在子mounted之前。这是官方已经明确的。而且在开发中也是需要避免这个问题的。

[leoni121]

1. 加载渲染过程
   父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
2. 子组件更新过程
   父beforeUpdate->子beforeUpdate->子updated->父updated
3. 父组件更新过程
   父beforeUpdate->父updated
4. 销毁过程
   父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

你好！ 请问具体为什么 这么处理啊？

[ShiRouMi]

子组件更新，子beforeUpdate->子updated，并不会直接触发父组件钩子
单向数据流呀

[amanzyw]

@zeroone001
1，父组件：beforeDestroy,
2，子组件：beforeDestroy->destroyed,
3，父组件：destroyed

[chaijinsong]

vue的生命周期：beforeCreate created beforeMount mounted beforeDestory destoryed beforeUpdate updated

父组件和子组件钩子执行顺序

1. 加载渲染过程：父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
   父组件挂载完毕肯定是等里面的子组件都挂载完毕后才算父组件挂载完毕了，所以父组件的mounted在最后。
2. 子组件更新过程(子组件更新影响到父组件的情况)：父beforeUpdate -> 子beforeUpdate->子updated -> 父updted
   子组件更新过程(子组件更新不影响父组件的情况)：子beforeUpdate -> 子updated
3. 父组件更新过程(父组件影响子组件的情况)：父beforeUpdate -> 子beforeUpdate->子updated -> 父updted
   父组件更新过程(父组件不影响子组件的情况)：父beforeUpdate -> 父updated
4. 销毁过程：父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

[habc0807]

1. 加载渲染过程
   父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
2. 子组件更新过程
   父beforeUpdate->子beforeUpdate->子updated->父updated
3. 父组件更新过程
   父beforeUpdate->父updated
4. 销毁过程
   父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

@luchx 谢谢你的回答，我对2，3不太理解。如果一个页面 app组件-> main组件 ->footer组件-> btn组件 ，当btn组件更新的时候，是这样的更新过程吗？
footer组件beforeUpdate -> btn组件beforeUpdate -> btn组件updated -> footer组件updated
如果是的话，当footer组件beforeUpdate、updated的时候，main组件和app组件是也会走这样的更新过程吗。

[luchx]

@luchx 谢谢你的回答，我对2，3不太理解。如果一个页面 app组件-> main组件 ->footer组件-> btn组件 ，当btn组件更新的时候，是这样的更新过程吗？
footer组件beforeUpdate -> btn组件beforeUpdate -> btn组件updated -> footer组件updated
如果是的话，当footer组件beforeUpdate、updated的时候，main组件和app组件是也会走这样的更新过程吗。

@habc0807

1. 如果只是btn组件更新是只会触发btn组件的生命周期，也就是btn组件: beforeUpdate -> updated
2. 父子组件的更新依赖执行顺序是在于全局状态的更新，比如通过props传递，或者vuex等存在数据流向触发的更新，那么更新顺序就是父beforeUpdate->子beforeUpdate->子updated->父updated

希望以上回答能解决你的困惑 : )

[justfn]

还有异步组件的情况 没人讨论吗