Later, there are cases. Through the cases, the four stages and eight hook functions contained in the Vue life cycle are analyzed in turn.

1. What is the Vue life cycle?

Vue life cycle refers to the process from the beginning of creation to destruction of Vue instance objects. All functions of Vue are implemented around its life cycle. Corresponding hook functions are called at different stages of the life cycle to realize two important functions: component data management and DOM rendering.

2.vue life cycle can be divided into eight stages.

1. Before create

The corresponding hook function is beforeCreate. This stage is after instance initialization. At this time, the data observation and event mechanism are not formed, and DOM nodes cannot be obtained.

The attributes of el, data and data in the vue instance are undefined (see the case for details)

2. created

The corresponding hook function is created. At this stage, the vue instance has been created and the DOM element cannot be obtained.

el is still undefined, and the data has been bound to the attribute in data (when the value of the attribute in data changes, the view will also change). Here, you can count the penultimate chance to change the data before rendering (the last change is the next hook function). You can obtain the initial data here (see the case for details)

3. Before load (beforeMount)

The corresponding hook function is beforeMount. At this stage, no specific DOM element is available, but the root node mounted by vue has been created. Next, vue's operation on DOM will continue around this root element; Before mount is a transitional stage. Generally, a project can only be used once or twice.

Before loading (the initialization of data and el data is completed), but the contents of the page are still placeholders in vue. The message information in data is not hung in the DOM node. This is the last opportunity to change the data before rendering. Other hook functions will not be triggered. You can obtain the initial data here (see the case for details)

4. mounted

created cannot operate on DOM nodes, while mounted can operate on DOM nodes

The corresponding hook function is mounted. Mounted is the most commonly used function. Generally, our asynchronous requests are written here. At this stage, both data and DOM have been rendered.

After loading, the html has been rendered (ajax requests can be placed in this function), and the message in the data in the vue instance is mounted in the BOM node

5. Before update

The corresponding hook function is beforeUpdate. At this stage, Vue follows the principle of data driven DOM; The beforeUpdate function does not update the data immediately after the data is updated, but the data in the DOM will change, which is the function of Vue two-way data binding.

The status before updating (before the data in the view layer changes, not before the data in the data changes), triggered before re rendering, and then the virtual dom mechanism of vue will rebuild the virtual dom and re render after comparing it with the previous virtual dom tree (see effect 2 for details)

6. updated

The corresponding hook function is updated. At this stage, DOM is synchronized with the changed content.

The data has been changed and the dom has been re rendered (see effect 2 for details)

7. Before destruction

The corresponding hook function is beforeDestroy. In the previous stage, Vue has successfully updated the DOM through data-driven. When we no longer need Vue to manipulate the DOM, we need to destroy Vue, that is, clear the association between Vue instance and DOM, and call the destroy method to destroy the current component. The beforeDestroy hook function is triggered before destruction.

Execute before destruction ($destroy will be executed when the method is called). Generally, it will deal with the aftermath here: clear the timer, clear the events not bound by the instruction... ') (see effect 3 for details)

8. destroyed

The corresponding hook function is destroyed. After destruction, the destroyed hook function is triggered.

After destruction (Dom element exists, but it is no longer controlled by vue), uninstall the watcher, event listening and sub components (see effect 3 for details)

code:

Configure Routing: redirect the page to index, jump to the content component, and then jump from the content component to the last component to complete the whole life cycle of the content component.

import Vue from 'vue'
import Router from 'vue-router'
import Index from  "@/sszq-pages/Index.vue"
import Content from  "@/sszq-pages/Content.vue"
import Last from  "@/sszq-pages/Last.vue"
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      redirect:'/index',
    },
    {
      path: '/index',
      name: 'index',
      component:Index
    },
    {
      path: '/content',
      name: 'content',
      component:Content
    },
    {
      path: '/last',
      name: 'last',
      component:Last
    }
  ]
})

index component:

<template>
    <div>
      <p>Hello World!</p>
      <router-link to="/content">Click jump content</router-link>
    </div>
</template>

<script>
import contents from "@/sszq-pages/Content.vue"
export default {
  name: 'index',
  components: {
    contents
  },
  data () {
    return {

    }
  }
}
</script>

content component:

<template>
    <div>
      <p>{{msg}}</p>
      <button @click="toChange()">change data</button>
      <router-link to="/last">Destroy this component and jump to the new interface</router-link>
    </div>
</template>
<script>
import Last from "@/sszq-pages/Last.vue"
export default {
  name: 'last',
  components: {
    Last
  },
  data () {
    return {
      msg:'This is the initial data'
    }
  },
  beforeCreate() {
    console.log('this.$el Value is',this.$el,'Before creation')
    console.log('this.msg Value is',this.msg,'Before creation')
  },
  created() {
    console.log('this.$el Value is',this.$el,'After creation')
    console.log('this.msg Value is',this.msg,'After creation')
  },
  beforeMount() {
    console.log('this.$el Value is',this.$el,'Before loading')
    console.log('this.msg Value is',this.msg,'Before loading')
  },
  mounted() {
    console.log('this.$el Value is',this.$el,'After loading')
    console.log('this.msg Value is',this.msg,'After loading')
  },
  beforeUpdate() {
    alert('Page data is about to change.')
    console.log('this.$el Value is',this.$el,'Before update')
    console.log('this.msg Value is',this.msg,'Before update')
    alert('Page data has changed.')
  },
  updated() {
    alert('After performing the update.')
    console.log('this.$el Value is',this.$el,'After update')
    console.log('this.msg Value is',this.msg,'After update')
  },
  beforeDestroy() {
    console.log('this.$el Value is',this.$el,'Before destruction')
    console.log('this.msg Value is',this.msg,'Before destruction')
    alert('Destroy this component?')
  },
  destroyed() {
    console.log('this.$el Value is',this.$el,'After destruction')
    console.log('this.msg Value is',this.msg,'After destruction')
  },

  methods:{
    toChange(){
      this.msg='I'm the new data'
    }
  }
}
</script>

Last component:

<template>
    <div>
      <p>This is last</p>
    </div>
</template>

<script>
export default {
  name: 'Last',
  data () {
    return {

    }
  },
}
</script>

Effect 1: the first loading of the page will trigger four hooks: beforecreate, created, beforemount and mounted.

Effect 2: (beforeUpdate updated)

Effect 3: (beforeDestroy destroyed)

3. Applicable scenarios of life cycle

Before create: you can add a loading event here and trigger it when the instance is loaded
created: the event at the completion of initialization is written here. For example, if the loading event ends here, asynchronous requests can also be called here
mounted: you can send a request to the back end, obtain data, mount elements, and obtain DOM nodes.
updated: if the data is processed uniformly, write the corresponding function here
Before destroy: you can make a confirmation box to confirm the stop event. nextTick: operate dom immediately after updating the data

4. Understanding of vue life cycle

Before / after creation: in the before created phase, the vue instance has not been mounted yet.
Before / after loading: in the beforeMount phase, both $el and data of the vue instance have been initialized, but it is still the virtual dom node before mounting, the data in the case MSG has not been replaced. In the mounted phase, the vue instance is mounted, and the data MSG successfully rendered.
Before / after update: when the data changes, the beforeUpdate and updated methods will be triggered.
Before / after destruction: after the destroy method is executed, the change of data will no longer trigger the periodic function, and the DOM element exists, but it is no longer controlled by vue.

The follow-up will continue to improve~~