Vue生命周期

  {{ message }}

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

beforeCreate	created	beforeMount	mounted	beforeUpdate	updated	beforeDestroy	destroyed
data observer & event/watcher 事件配置之前	data observer & event/watcher 完成，$el不可见	$el可见，挂载之前	挂载完成	数据更新，DOM未渲染	DOM已渲染	实例销毁前，实例仍可用	解绑完成