Vue Instance Lifecycle Hooks 實例生命週期

一個簡單的 sample，主要我是在看整個 vue  的生命週期，對 vue 有些瞭解了。

var vm = new Vue({
  el: '#app',
  data: {
    name: 'winwu',
    width: 900,
    height: 500,
    barColor: 'red',
    barHeight: 30,
    barXOffset: 10,
    dataset: [30, 20, 45, 12, 21]
  },
  // https://vuejs.org/api/#Options-Lifecycle-Hooks
  init: function() {
    // init 這時候還沒有觀察到 data observation, event, watcher...
    console.log('init: my name is ' + this.name);
  },
  created: function() {
    /* data observation,
     * computed properties,
     * methods,
     * watch/event callbacks.
     * 在這個階段完成
     * 但，$el 這時候還沒有好，(DOM 的解析還沒開始)
     */
    console.log('creadted: my name is ' + this.name);
  },
  beforeCompile: function() {
    // 我也不曉得什麼時候會呼叫到這裡
    console.log('beforeCompile: my name is ' + this.name);
  },
  compiled: function() {
    console.log('compiled: my name is ' + this.name);
  },
  ready: function() {
    // 在 vm.$el 插入 DOM 時呼叫。
    console.log('ready: my name is ' + this.name);
  },
  attached: function() {
    console.log('attached');
  },
  beforeDestroy: function() {
    // 我也不曉得什麼時候會呼叫到這裡
    console.log('beforeDestroy');
  },
  destroyed : function() {
    console.log('destroyed: my name is ' + this.name);
  }
});

// call destroy, 才會觸發 destroyed func. 這時候長條圖已經不會隨著 data 連動
vm.$destroy();

// 第一個參數為是否 remove，若為 true，所有 DOM 的關聯會刪掉。
// vm.$destroy(true);

這是 log 結果:

init: my name is undefined
01.js:29 creadted: my name is winwu
01.js:33 beforeCompile: my name is winwu
01.js:36 compiled: my name is winwu
01.js:43 attached
01.js:40 ready: my name is winwu
01.js:46 beforeDestroy
01.js:49 destroyed: my name is winwu// vm.$destroy(true);

我放在 jsbin 上面，可能比較好讀:

JS Bin on jsbin.com
jsbin: http://jsbin.com/mibiya/1/edit?html,js,console,output
參考官方文件: https://vuejs.org/api/#Options-Lifecycle-Hooks