Vue 的生命週期

Posted on | In

壹、 Vue 的生命週期

一、 Vue 的生命週期圖例及說明


圖片來源：Lifecycle Diagram
說明註解 By Pai

二、 vue instance 週期程式實做

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
var vm = new Vue({
  beforeCreate: function() {
    //vue instance 被 constructor 建立前
    console.log('beforeCreate');
  },
  created: function() {
    //vue instance 被 constructor 建立後，在這裡完成 data binding
    console.log('created');
  },
  
  // =====執行 vm.$mount('#app')，讓實體物件綁定 DOM。===== //
  
  beforeMount: function() {
    //綁定 DOM 之前
    console.log('beforeMount');
  },
  mounted: function() {
    //綁定 DOM 之後
    console.log('mounted');
  },
  
  //===== 執行 vm.$forceUpdate()，來更新 DOM。 =====// 
  
  beforeUpdate: function() {
    //資料更新，但尚未更新 DOM
    console.log('beforeUpdate');
  },
  updated: function() {
    //因資料更新，而更新 DOM
    console.log('updated');
  },
  
  //===== vm.$destroy(); 銷毀 instance =====// 
  
  beforeDestroy: function() {
    //移除 vue instance 之前
    console.log('beforeDestroy');
  },
  destroyed: function() {
    //移除 vue instance 之後
    console.log('destroyed');
  }
});

三、參考資料

桑莫，夏天
六角學院: 從 Vuejs 初探 Web Component 的世界

0%