Instance Lifecycle Hooks

Instance Lifecycle Hooks API (opens new window)

Simply put, lifecycle hook functions are functions that a Vue instance automatically executes at certain points in time.

<div id="app">{{msg}}</div>

<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      msg: 'Vue Lifecycle'
    },
    beforeCreate: function() {
      console.group('------beforeCreate state------');
      console.log("el     : " + this.$el); //undefined
      console.log("data   : " + this.$data); //undefined
      console.log("msg: " + this.msg) //undefined
    },
    created: function() {
      console.group('------created state------');
      console.log("el     : " + this.$el); //undefined
      console.log("data   : " + this.$data); //initialized
      console.log("msg: " + this.msg); //initialized
    },
    beforeMount: function() {
      console.group('------beforeMount state------');
      console.log(this.$el);// <div id="app">{{msg}}</div> before mount state
    },
    mounted: function() {
      console.group('------mounted state------');
      console.log(this.$el);// <div id="app">Vue Lifecycle</div>   msg content is mounted and rendered to the page
    },
      // Before data is modified
    beforeUpdate: function () {
      console.group('beforeUpdate state===============>');
      console.log("el     : " + this.$el);
      console.log(this.$el);
      console.log("data   : " + this.$data);
      console.log("msg: " + this.msg);
    },
      // After beforeUpdate is triggered, the virtual DOM re-renders and applies updates
      // After data is modified
    updated: function () {
      console.group('updated state===============>');
      console.log("el     : " + this.$el);
      console.log(this.$el);
      console.log("data   : " + this.$data);
      console.log("msg: " + this.msg);
    },
      // Before calling vm.$destroy()
    beforeDestroy: function () {
      console.group('beforeDestroy state===============>');
      console.log("el     : " + this.$el);
      console.log(this.$el);
      console.log("data   : " + this.$data);
      console.log("msg: " + this.msg);
    },
       // After calling vm.$destroy()
    destroyed: function () {
      console.group('destroyed state===============>');
      console.log("el     : " + this.$el);
      console.log(this.$el);
      console.log("data   : " + this.$data);
      console.log("msg: " + this.msg)
    }
  })
</script>

Demo

See the Pen 生命周期钩子 by xugaoyi (@xugaoyi) on CodePen.

Lifecycle Diagram