Vue從甜小白到皮大佬系列(三) 生命週期

時間 2019-11-06

標籤 vue 大佬系列生命週期简体版

原文原文鏈接

閱讀時間預估:5分鐘 前端

什麼是生命週期?

生命週期是指一個事物從生到死的過程,軟件也同樣,每一個語言都有其生命週期,從出生到死亡,每一個階段作每一個階段應該作的事情,簡單說：一個組件從開始到最後消亡所經歷的各類狀態，就是一個組件的生命週期。vue

例如面前這位大俠,既然是小白那麼就要苦練基本功,千里之行始於足下,萬層高樓,平地起,相信在持續的努力中會有所進步,廢話很少說直接上乾貨。git

官方傳送門程序員

vue生命週期

生命週期鉤子函數的定義：從組件被建立，到組件掛載到頁面上運行，再到頁面關閉組件被卸載，這三個階段老是伴隨着組件各類各樣的事件，這些事件，統稱爲組件的生命週期函數！github
注意：Vue在執行過程當中會自動調用生命週期鉤子函數，咱們只須要提供這些鉤子函數便可segmentfault
注意：鉤子函數的名稱都是Vue中規定好的！api

鉤子函數 - beforeCreate()

說明：在實例初始化以後，數據觀測 (data observer) 和 event/watcher 事件配置以前被調用
注意：此時，沒法獲取 data中的數據、methods中的方法

鉤子函數 - created()

注意：這是一個經常使用的生命週期，能夠調用methods中的方法、改變data中的數據
vue實例生命週期 - 參考1
vue實例生命週期參考2
使用場景：發送請求獲取數據

鉤子函數 - beforeMounted()

說明：在掛載開始以前被調用

鉤子函數 - mounted()

說明：此時，vue實例已經掛載到頁面中，能夠獲取到el中的DOM元素，進行DOM操做

鉤子函數 - beforeUpdated()

說明：數據更新時調用，發生在虛擬 DOM 從新渲染和打補丁以前。你能夠在這個鉤子中進一步地更改狀態，這不會觸發附加的重渲染過程。
注意：此處獲取的數據是更新後的數據，可是獲取頁面中的DOM元素是更新以前的

鉤子函數 - updated()

說明：組件 DOM 已經更新，因此你如今能夠執行依賴於 DOM 的操做。

鉤子函數 - beforeDestroy()

說明：實例銷燬以前調用。在這一步，實例仍然徹底可用。
使用場景：實例銷燬以前，執行清理任務，好比：清除定時器等

鉤子函數 - destroyed()

說明：Vue 實例銷燬後調用。調用後，Vue 實例指示的全部東西都會解綁定，全部的事件監聽器會被移除，全部的子實例也會被銷燬。

說了這麼多來點實在的,大佬通常如何在代碼中合理的利用生命週期來構建代碼呢?bash

beforeCreate () {
   // 進行初始化事件，進行數據的觀測，能夠看到在created的時候數據已經和data屬性進行綁定（放在data中的屬性當值發生改變的同時，視圖也會改變）。注意：此時仍是沒有el選項
  },
  components: {},
  data () {
    return {
      show: false,
      msg: "hello word",
      mg: "你好世界"
    }
  },
  watch: {

  },
  methods: {
    destory () {
        // 調用銷燬
      this.$destroy();
    }
  },
  created () {
    // 在這一階段發生的事情仍是比較多的。首先，會判斷對象是否有el選項：若是有的話就繼續向下編譯，若是沒有el選項，則中止編譯，也就意味着中止了生命週期，直到在該vue實例上調用vm.$mount(el)
  },
  beforeMount () {
    // &emsp;能夠看到此時是給vue實例對象添加$el成員，而且替換掉掛在的DOM元素。由於在以前console中打印的結果能夠看到beforeMount以前el上仍是undefined。
  },
  mounted () {
    this.intervalID = setInterval(() => {
      console.log("++++++-------++++");
      this.show = !this.show;
    }, 1000);
   // 在mounted以前p中仍是經過{{message}}進行佔位的，由於此時尚未掛在到頁面上，仍是JavaScript中的虛擬DOM形式存在的。在mounted以後能夠看到h1中的內容發生了變化。
  },

  beforeUpdate () {
    // 當vue發現data中的數據發生了改變，會觸發對應組件的從新渲染，前後調用beforeUpdate和updated鉤子函數。
  },
  updated () {
    // 在beforeUpdate能夠監聽到data的變化，可是view層沒有被從新渲染，view層的數據沒有變化。等到updated的時候，view層才被從新渲染，數據更新。
  },

  beforeDestory () {
    clearInterval(this.intervalID);
    // &emsp;beforeDestroy鉤子函數在實例銷燬以前調用。在這一步，實例仍然徹底可用,能夠用於清除定時器
  },
  destory () {
   //調用後，Vue 實例指示的全部東西都會解綁定，全部的事件監聽器會被移除，全部的子實例也會被銷燬。
  },
複製代碼