詳解Vue生命週期【上】

一燈發表於2019-05-13
Vue

前言

生命週期是理解Vue的一個非常重要的環節，初學Vue時可能會出現資料渲染的失敗的錯誤，因此打算寫兩篇部落格詳細介紹Vue的生命週期：

  • 單個元件的Vue生命週期（本文）
  • 多個元件的Vue生命週期

Vue生命週期

1.1 beforeCreate()

說明

在例項初始化之後，資料觀測 (data observer) 和 event/watcher 事件配置之前被呼叫；data、computed、watch、methods和DOM都不能使用

  data () {
    return {
      msg: 1
    }
  },
  beforeCreate() {
    console.log(this.$data)  //undefined
    console.log(this.$el)    //undefined
  }
複製程式碼

注意

如果非要在beforeCreate()取data也不是沒有辦法，非同步方式可以通過this.$nextTick()或seTimeout，同步方式可以通過this.$options。當然一般不會這麼操作。

  beforeCreate() {
    this.$nextTick(() => {       
      console.log(this.msg)                  //1
    })

    setTimeout(()=> {
      console.log(this.msg)                  //1
    }, 1000)

    console.log(this.$options.data()["msg"]) //1
  }
複製程式碼

1.2 created()

說明

在例項建立完成後被立即呼叫，可以操作data、computed、watch、methods，但DOM還沒掛載，不能操作。

  created () {
    this.getMsg()          //1
    console.log(this.msg)  //1
    console.log(this.$el)  //undefined
  },
  methods: {
    getMsg() {
      console.log(this.msg)
    }
  }
複製程式碼

通常在此進行頁面初始化操作或簡單的Ajax請求（此時頁面還未呈現，過多的請求會導致白屏）

1.3 beforeMount()

說明

在掛載開始之前被呼叫：相關的 render 函式首次被呼叫。這一步沒啥特別的，很少在此進行操作。

  beforeMount() {
    console.log(this.msg)  //1
    console.log(this.$el)  //undefined
  }
複製程式碼

1.4 mounted()

說明

例項被掛載到DOM上。通常用於執行Ajax請求。

  mounted() {
    console.log(this.msg)  //1
    console.log(this.$el)   //可看到 DOM 的資訊
  }
複製程式碼

注意

mounted 不保證所有子元件都一起被掛載了。若想要等整個檢視都渲染完畢再操作，可以使用 this.$nextTick

  mounted() {
    this.$nextTick()
  }
複製程式碼

1.5 beforeUpdate()

只有資料更新時才呼叫，發生在虛擬 DOM 打補丁之前。適合在更新之前訪問現有的 DOM，比如手動移除已新增的事件監聽器。

<div>{{msg}}</div>
複製程式碼
 mounted() {   
    this.msg = 2
  },
  beforeUpdate: function() {
    console.log(this.$el.innerHTML)  //1
    console.log(this.$el)            //<div ...> 2 </div>
    console.log(this.msg)            //2
  }
複製程式碼

1.6 updated()

說明

虛擬 DOM 重新渲染和打補丁之後呼叫，元件DOM已經更新，可以執行依賴於DOM的操作。

  mounted() {   
    this.msg = 2
  },
  updated: function() {
    console.log(this.$el.innerHTML)  //2
    console.log(this.$el)            //<div ...> 2 </div>
    console.log(this.msg)            //2
  }
複製程式碼

注意

updated 不保證所有子元件都被重繪了。若想要等到整個檢視都重繪完畢再操作，可以用 this.$nextTick

1.7 beforeDestroy()

說明

例項銷燬前呼叫，這裡沒什麼特殊的，該用的仍然可用

  beforeDestroy() {
    console.log(this.msg)  //2
    console.log(this.$el)  //<div ...> 2 </div>
  }
複製程式碼

1.8 destroyed()

說明

Vue 例項銷燬後呼叫。呼叫後，Vue 例項指示的所有東西都會解繫結，所有的事件監聽器會被移除，所有的子例項也會被銷燬。

這裡我一開始的理解是資料不能用了，結果還依然列印了資料，不解中……

 destroyed() {
    console.log(this.msg)  //2
    console.log(this.$el)  //<div ...> 2 </div>
  }
複製程式碼

總結

Vue的生命週期可以總結為3個階段：

  1. 初始化階段（執行1次）：beforeCreate、created、beforeMount、mounted
  2. 資料更新階段（執行多次）：beforeUpdate、updated
  3. 銷燬階段/切換元件（執行1次）：beforeDestory、destroyed
  4. 用得比較多的就是 created 和 mounted 了

參考

感謝看完的朋友點個贊，感謝鼓勵和支援！

相關文章