vue 生命週期 （更新中）

一 生命週期 （更新中）

一、beforeCreate 建立前

【注】這個階段，不能使用 this 變量，data() 中的數據、menthods() 中的方法、watcher() 中的事件都不能得到。

【例】添加 loading 事件，在加載實例時觸發

 

二、created 建立完畢

【注】這個階段，能夠操做vue實例中的數據和方法，不能操做 dom 節點

【例】初始化完成時事件，結束 loading 事件，異步請求

 

三、beforeMounte 掛在前

【注】在掛載開始以前被調用，相關的 render 函數首次被調用。

 

四、mounted 掛載結束

【注】這個階段，dom 節點被渲染到文檔內，能夠操做 dom節點

【例】掛載元素，獲取 dom 節點

 

五、beforeUpdate 更新前

【注】

 

六、updated 更新完成

【注】

【例】對數據的統一處理

 

七、beforeDestroy 銷燬前

【注】

【例】確認中止事件的確認框

 

八、destroyed 銷燬完成

【注】

 

二 關於 nextTick

【注】在下次 DOM 更新循環結束以後執行延遲迴調。在修改數據以後當即使用這個方法，獲取更新後的 DOM。

【例】更新數據後當即操做 dom 節點

created() {
  setTimeout(() => {
    this.number = 100
    this.$nextTick(() => {
      console.log('nextTick', document.getElementsByTagName('p')[0])
    })
  },100)
}    

 

Vue.nextTick() 的用法：

(1) 若是要在 create() 函數中進行 dom 操做，就要將對 dom 的操做放在 Vue.nextTick() 的回調函數中。 緣由：create() 函數執行期間 dom 還未渲染，mounted() 函數執行期間，dom 的掛載和渲染都已完成。

(2) 數據變化時執行某一操做，這個操做須要使用隨數據變化而變化的 dom 結構，須要將這一操做訪入 Vue.nextTick() 的回調函數總才能實現。