加載頁面執(zhí)行步驟

1、父組件：beforeCreate -> created -> beforeMount

2、子組件：beforeCreate -> created -> beforeMount -> mounted

3、父組件：mounted

銷毀組件執(zhí)行步驟

1、父組件：beforeDestroy

2、子組件：beforeDestroy

3、子組件：destroyed

2、父組件：destroyed

驗證效果（加載頁面執(zhí)行步驟）

index.vue

<template><!-- 首頁 --><div class="views__home"><sub-model></sub-model></div> </template><script> import SubModel from './sub-model.vue'; // 子組件 export default {components: {SubModel},beforeCreate() {console.log('父組件', 'beforeCreate');},created() {console.log('父組件', 'created');},beforeMount() {console.log('父組件', 'beforeMount');},mounted() {console.log('父組件', 'mounted');} }; </script><style lang="less" scoped></style>

sub-model.vue

<template><!-- 子組件 --><div class="views__home__sub-model"></div> </template><script> export default {beforeCreate() {console.log('子組件', 'beforeCreate');},created() {console.log('子組件', 'created');},beforeMount() {console.log('子組件', 'beforeMount');},mounted() {console.log('子組件', 'mounted');} }; </script><style lang="less" scoped></style>

打印結果

驗證效果（銷毀組件執(zhí)行步驟）

index.vue

<template><!-- 首頁 --><div class="views__home"><sub-model></sub-model></div> </template><script> import SubModel from './sub-model.vue'; // 子組件 export default {components: {SubModel},beforeDestroy() {console.log('父組件', 'beforeDestroy');},destroyed() {console.log('父組件', 'destroyed');} }; </script><style lang="less" scoped></style>

sub-model.vue

<template><!-- 子組件 --><div class="views__home__sub-model"></div> </template><script> export default {beforeDestroy() {console.log('子組件', 'beforeDestroy');},destroyed() {console.log('子組件', 'destroyed');} }; </script><style lang="less" scoped></style>

打印結果

總結

以上是生活随笔為你收集整理的vue 子父组件周期顺序_父组件和子组件生命周期钩子执行顺序是什么？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。