vue父组件与子组件生命周期钩子顺序是啥？

Posted 2023-04-25

参考技术A 一、渲染过程

父组件挂载完成一定是子组件挂载完成之后，才算是父组件挂载完成，所以父组件的mounted在组件间的mounted之后。

父beforeCreate-->父created-->父beforeMounte-->子beforeCreate-->子created-->子beforeMounte-->子mounted-->父mounted

二、子组件更新过程：

1.影响到父组件：父beforeUpdate-->子beforeUpdate-->子updated-->父updated

2.不影响父组件：子beforeUpdate-->子updated

三、父组件更新过程：

1.影响到子组件：父beforeUpdate-->子beforeUpdate-->子updated-->父updated

2.不影响子组件：父beforeUpdate-->父updated

四、销毁过程

父beforeDestroy-->子beforeDestroy-->子destroyed-->父destroyed

看起来很多很难记忆，其实只要理解了，不管哪儿种情况，都一定是父组件等待子组件完成后，才会执行自己对应完成的钩子，就可以很容易记忆。

Vue 的父组件和子组件生命周期钩子函数执行顺序？

Vue 的父组件和子组件生命周期钩子函数执行顺序可以归类为以下 4 部分：

• 加载渲染过程

父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted

• 子组件更新过程

父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated

• 父组件更新过程

父 beforeUpdate -> 父 updated

• 子组件销毁过程

父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

• 父组件销毁过程

父 beforeDestroy -> 父 destroyed