A: hi! ~ Hello everyone, I am YK bacteria 🐷, a microsystem front-end ✨, love to think, love to summarize, love to record, love to share 🏹, welcome to follow me 😘 ~ [wechat account: Yk2012Yk2012, wechat public account: ykyk2012]

“This is the 21st day of my participation in the Gwen Challenge in November. See details: The Last Gwen Challenge in 2021”

Today we will focus on the lifecycle in Vue and the lifecycle in parent-child components

1. Lifecycle of vUE objects

Life cycle:

  1. Also known as: lifecycle callback functions, lifecycle functions, lifecycle hooks.
  2. What it is: Some specially named functions Vue calls for us in the Nick of time.
  3. The name of a lifecycle function cannot be changed, but the details of the function are written by the programmer as required.
  4. The this in the lifecycle function refers to the VM or component instance object.
  1. Initialization display
  • beforeCreate()
  • created()
  • beforeMount()
  • mounted()
  1. Update the status
  • beforeUpdate()
  • updated()
  1. Destroy vUE instance:vm.$destory()
  • beforeDestory()
  • destoryed()

Official icon

2. Schematic diagram

3. Common lifecycle methods

  • mounted(): Send Ajax requests, start timer, bind custom events, subscribe messages and other asynchronous tasks [initialization operation]
  • beforeDestroy(): Do the finishing work, such as: clear timer, unbind custom events, unsubscribe messages, etc.

4. About destroying Vue instances

  1. You can’t see any information with Vue developer tools after destruction
  2. Custom events are invalidated after destruction, but native DOM events are still valid
  3. Usually not inbeforeDestroyManipulate the data, because if you do, the update process is no longer triggered.

Example 5.

<body>
  <div id="demo">
    <button @click="destoryVM">destroy vm</button>
    <p v-show="isShow">YK bacteriology front end</p>
  </div>
  <script src=".. /js/vue.js"></script>
  <script>
    new Vue({
      el: "#demo".data: {
        isShow: true,},// 1. Initialization phase
      beforeCreate() {
        console.log('beforeCreate()');
      },
      created() {
        console.log('created()');
      },

      beforeMount() {
        console.log('beforeMount()');
      },
      mounted() { // immediately after initializing the display (1 time)
        console.log('mounted()');
        this.intervalId = setInterval(() = > { // To pass a function as an argument, it is best to use the arrow function, since it does not have this inside the function
          this.isShow = !this.isShow;
        }, 1000)},// update phase
      beforeUpdate() {
        console.log('beforeUpdate()');
      },
      updated() {
        console.log('updated()');
      },

      // 3. Death phase
      beforeDestroy() { Call before death (1 time)
        console.log('beforeDestroy()');
        clearInterval(this.intervalId); // Clear the timer
      },
      destroyed() {
        console.log('destroyed()');
      },

      methods: {
        destoryVM() {
          this.$destroy(); // Memory leak, timer has not been cleared}}})</script>
</body>
Copy the code

6. Lifecycle of parent and child components

  1. Loading the rendering process
Parent beforeCreate-> Parent created-> parent beforeMount-> child beforeCreate-> child created-> child beforeMount-> Child Mounted -> parent MountedCopy the code
  1. The update process
Parent beforeUpdate-> Child beforeUpdate-> Child updated-> Parent updatedCopy the code
  1. Destruction of the process
Parent beforeDestroy-> Child beforeDestroy-> Child destroyed-> Parent destroyedCopy the code
  1. Common Hook versions
Parent beforeDestroy-> Child beforeDestroy-> Child destroyed-> Parent destroyedCopy the code

Finally, welcome to my column and make friends with YK bacteria