vue-parent-child-lifecycle-order All In One

vue-parent-child-lifecycle-order All In One

vue parent child lifecycle order

live demos

https://99kyx.csb.app/

https://codesandbox.io/s/vue-parent-child-lifecycle-order-99kyx

https://vue-parent-child-lifecycle-order.stackblitz.io

https://stackblitz.com/edit/vue-parent-child-lifecycle-order

<template>
  <div class="parent">
    <h2>{{ title }}</h2>
    <button @click="toggleShow">ToggleShow</button>
    <ChildComponent v-if="show"/>
  </div>
</template>

<script>
  import log from "../utils/log";
  import ChildComponent from "./child";
  export default {
    name: "ParentComponent",
    components: {
      ChildComponent,
    },
    props: {
      msg: String,
    },
    data() {
      return {
        title: "parent-lifecycle-order",
        show: true,
      };
    },
    methods: {
      toggleShow() {
        const { show } = this;
        this.show = !show;
      },
    },
    beforeCreate() {
      log(`parent beforeCreate`, 1)
    },
    created() {
      log(`parent created`, 2)
    },
    beforeMount() {
      log(`parent beforeMount`, 3)
    },
    mounted() {
      log(`parent mounted`, 4)
    },
    beforeUpdate() {
      log(`parent beforeUpdate`, 5)
    },
    updated() {
      log(`parent updated`, 6)
    },
    beforeDestroy() {
      log(`\nparent beforeDestroy`, 7)
    },
    destroyed() {
      log(`parent destroyed`, 8)
    },
    // catch error
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h2 {
    margin: 30px 0 0;
  }
</style>

<template>
  <div id="app">
    <h1>vue-parent-child-lifecycle-order</h1>
    <button @click="toggleShow">ToggleShow</button>
    <ParentComponent v-if="show"/>
  </div>
</template>

<script>
  import ParentComponent from "./components/parent";
  export default {
    name: "App",
    components: {
      ParentComponent,
    },
    data() {
      return {
        show: true,
      };
    },
    methods: {
      toggleShow() {
        const { show } = this;
        this.show = !show;
      },
    },
  };
</script>

<style>
  #app {
    font-family: "Avenir", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
</style>

Vue 2.x lifecycle

https://v2.vuejs.org/v2/api/#Options-Lifecycle-Hooks

https://v2.vuejs.org/v2/guide/instance.html#Lifecycle-Diagram

refs

---

---

©xgqfrms 2012-2025

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---