Vue生命周期

<div id="app">
  {{ message }}
</div>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  beforeCreate: function() {
    console.log('--------------beforeCreate----------------');
    console.log(this.$el);
    console.log('data: ' + this.$data);
    console.log('message: ' +  this.message);
  },
  created: function() {
    console.log('--------------created----------------');
    console.log(this.$el);
    console.log('data: ' + JSON.stringify(this.$data));
    console.log('message: ' +  this.message);
  },
  beforeMount: function() {
    console.log('--------------beforeMount-----------------');
    console.log(this.$el);
    console.log('data: ' + JSON.stringify(this.$data));
    console.log('message: ' +  this.message);
  },
  mounted: function() {
    console.log('--------------mounted---------------');
    console.log(this.$el);
    console.log('data: ' + JSON.stringify(this.$data));
    console.log('message: ' +  this.message);
  },
  beforeUpdate: function() {
    console.log('--------------beforeUpdate----------------');
    console.log(this.$el);
    console.log('data: ' + JSON.stringify(this.$data));
    console.log('message: ' +  this.message);
  },
  updated: function() {
    console.log('--------------updated---------------');
    console.log(this.$el);
    console.log('data: ' + JSON.stringify(this.$data));
    console.log('message: ' +  this.message);
  },
  beforeDestroy: function() {
    console.log('--------------beforeDestroy---------------');
    console.log(this.$el);
    console.log('data: ' + JSON.stringify(this.$data));
    console.log('message: ' +  this.message);
  },
  destroyed: function() {
    console.log('--------------destroyed-------------');
    console.log(this.$el);
    console.log('data: ' + JSON.stringify(this.$data));
    console.log('message: ' +  this.message);
  }
})

demo.png

update.png

destroy.png

lifecycle.png