vue2.x生命周期

vue2.x生命周期

1. beforeCreate

在實例初始化之后，數據觀測(data observer) 和 event/watcher 事件配置之前被調用。

 

2. created

實例已經創建完成之后被調用。在這一步，實例已完成以下的配置：數據觀測(data observer)，屬性和方法的運算， watch/event 事件回調。然而，掛載階段還沒開始，$el 屬性目前不可見。 可以在組件的這個期間請求數據，如果是keep-alive組件會被緩存起來，生命周期不會再次觸發，如果需要更新數據可以watch當前router變化，如果router是當前組件所在的router則請求數據。

 ...
  methods : {
    getData : function(id){
        ...
        this.content = 'test';
    }
 },
  created : function(){
      this.getData(this.id);
  }
  ...
  watch : {
      $route : function(){
           if(this.$route.name == 'xxx'){
                 this.getData(this.id);
           }
      }
   }
 ...

 

3. beforeMount

在掛載開始之前被調用：相關的 render 函數首次被調用。

 

4. mounted

vm.$el已掛載在文檔內，對已有dom節點的操作可以在這期間進行。

 

5. beforeUpdate

數據更新時調用，發生在虛擬 DOM 重新渲染和打補丁之前。

可以在這個鈎子中進一步地更改狀態，這不會觸發附加的重渲染過程。

 

6.updated

由於數據更改導致的虛擬 DOM 重新渲染和打補丁，在這之后會調用該鈎子。

當這個鈎子被調用時，組件 DOM 已經更新，所以你現在可以執行依賴於 DOM 的操作。然而在大多數情況下，你應該避免在此期間更改狀態，因為這可能會導致更新無限循環。

 

7.activated

keep-alive 組件激活時調用。

 

8.deactivated

keep-alive 組件停用時調用。

 

9.beforeDestroy

實例銷毀之前調用。在這一步，實例仍然完全可用。

 

10.destroyed

Vue 實例銷毀后調用。調用后，Vue 實例指示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的子實例也會被銷毀。

 

參考：https://cn.vuejs.org/v2/api/#選項-生命周期鈎子