?? Vue構(gòu)建大型單頁面電商應(yīng)用 開源啦!點(diǎn)我看源碼????

閱讀時(shí)間預(yù)估:5分鐘

image

什么是生命周期?

生命周期是指一個(gè)事物從生到死的過程,軟件也一樣,每個(gè)語言都有其生命周期,從出生到死亡,每個(gè)階段做每個(gè)階段應(yīng)該做的事情,簡單說：一個(gè)組件從開始到最后消亡所經(jīng)歷的各種狀態(tài)，就是一個(gè)組件的生命周期。

例如面前這位大俠,既然是小白那么就要苦練基本功,千里之行始于足下,萬層高樓,平地起,相信在持續(xù)的努力中會(huì)有所進(jìn)步,廢話不多說直接上干貨。

官方傳送門

vue生命周期

• 生命周期鉤子函數(shù)的定義：從組件被創(chuàng)建，到組件掛載到頁面上運(yùn)行，再到頁面關(guān)閉組件被卸載，這三個(gè)階段總是伴隨著組件各種各樣的事件，這些事件，統(tǒng)稱為組件的生命周期函數(shù)！

• 注意：Vue在執(zhí)行過程中會(huì)自動(dòng)調(diào)用生命周期鉤子函數(shù)，我們只需要提供這些鉤子函數(shù)即可

• 注意：鉤子函數(shù)的名稱都是Vue中規(guī)定好的！

Vue的生命周期

鉤子函數(shù) - beforeCreate()

• 說明：在實(shí)例初始化之后，數(shù)據(jù)觀測 (data observer) 和 event/watcher 事件配置之前被調(diào)用
• 注意：此時(shí)，無法獲取 data中的數(shù)據(jù)、methods中的方法

鉤子函數(shù) - created()

• 注意：這是一個(gè)常用的生命周期，可以調(diào)用methods中的方法、改變data中的數(shù)據(jù)
• vue實(shí)例生命周期 - 參考1
• vue實(shí)例生命周期 參考2
• 使用場景：發(fā)送請求獲取數(shù)據(jù)

鉤子函數(shù) - beforeMounted()

• 說明：在掛載開始之前被調(diào)用

鉤子函數(shù) - mounted()

• 說明：此時(shí)，vue實(shí)例已經(jīng)掛載到頁面中，可以獲取到el中的DOM元素，進(jìn)行DOM操作

鉤子函數(shù) - beforeUpdated()

• 說明：數(shù)據(jù)更新時(shí)調(diào)用，發(fā)生在虛擬 DOM 重新渲染和打補(bǔ)丁之前。你可以在這個(gè)鉤子中進(jìn)一步地更改狀態(tài)，這不會(huì)觸發(fā)附加的重渲染過程。
• 注意：此處獲取的數(shù)據(jù)是更新后的數(shù)據(jù)，但是獲取頁面中的DOM元素是更新之前的

鉤子函數(shù) - updated()

• 說明：組件 DOM 已經(jīng)更新，所以你現(xiàn)在可以執(zhí)行依賴于 DOM 的操作。

鉤子函數(shù) - beforeDestroy()

• 說明：實(shí)例銷毀之前調(diào)用。在這一步，實(shí)例仍然完全可用。
• 使用場景：實(shí)例銷毀之前，執(zhí)行清理任務(wù)，比如：清除定時(shí)器等

鉤子函數(shù) - destroyed()

• 說明：Vue 實(shí)例銷毀后調(diào)用。調(diào)用后，Vue 實(shí)例指示的所有東西都會(huì)解綁定，所有的事件監(jiān)聽器會(huì)被移除，所有的子實(shí)例也會(huì)被銷毀。

說了這么多來點(diǎn)實(shí)在的,大佬一般如何在代碼中合理的利用生命周期來構(gòu)建代碼呢?

  beforeCreate () {
   // 進(jìn)行初始化事件，進(jìn)行數(shù)據(jù)的觀測，可以看到在created的時(shí)候數(shù)據(jù)已經(jīng)和data屬性進(jìn)行綁定（放在data中的屬性當(dāng)值發(fā)生改變的同時(shí)，視圖也會(huì)改變）。注意：此時(shí)還是沒有el選項(xiàng)
  },
  components: {},
  data () {
    return {
      show: false,
      msg: "hello word",
      mg: "你好世界"
    }
  },
  watch: {

  },
  methods: {
    destory () {
        // 調(diào)用銷毀
      this.$destroy();
    }
  },
  created () {
    // 在這一階段發(fā)生的事情還是比較多的。首先，會(huì)判斷對象是否有el選項(xiàng)：如果有的話就繼續(xù)向下編譯，如果沒有el選項(xiàng)，則停止編譯，也就意味著停止了生命周期，直到在該vue實(shí)例上調(diào)用vm.$mount(el)
  },
  beforeMount () {
    // 　可以看到此時(shí)是給vue實(shí)例對象添加$el成員，并且替換掉掛在的DOM元素。因?yàn)樵谥癱onsole中打印的結(jié)果可以看到beforeMount之前el上還是undefined。
  },
  mounted () {
    this.intervalID = setInterval(() => {
      console.log("++++++-------++++");
      this.show = !this.show;
    }, 1000);
   // 在mounted之前p中還是通過{{message}}進(jìn)行占位的，因?yàn)榇藭r(shí)還沒有掛在到頁面上，還是JavaScript中的虛擬DOM形式存在的。在mounted之后可以看到h1中的內(nèi)容發(fā)生了變化。
  },

  beforeUpdate () {
    // 當(dāng)vue發(fā)現(xiàn)data中的數(shù)據(jù)發(fā)生了改變，會(huì)觸發(fā)對應(yīng)組件的重新渲染，先后調(diào)用beforeUpdate和updated鉤子函數(shù)。
  },
  updated () {
    // 在beforeUpdate可以監(jiān)聽到data的變化，但是view層沒有被重新渲染，view層的數(shù)據(jù)沒有變化。等到updated的時(shí)候，view層才被重新渲染，數(shù)據(jù)更新。
  },

  beforeDestory () {
    clearInterval(this.intervalID);
    // 　beforeDestroy鉤子函數(shù)在實(shí)例銷毀之前調(diào)用。在這一步，實(shí)例仍然完全可用,可以用于清除定時(shí)器
  },
  destory () {
   //調(diào)用后，Vue 實(shí)例指示的所有東西都會(huì)解綁定，所有的事件監(jiān)聽器會(huì)被移除，所有的子實(shí)例也會(huì)被銷毀。
  },

看完這篇不知道面前的這位大俠是否真正的領(lǐng)略到vue生命周期的厲害之處,一定要多用多理解每個(gè)生命節(jié)點(diǎn)都能干啥,別在錯(cuò)誤的節(jié)點(diǎn)干錯(cuò)誤的事,例如面前這位大俠,此時(shí)正是年輕有為之時(shí),一定要腳踏實(shí)地,珍惜時(shí)間,充實(shí)自己,切勿,坐享其成,好高騖遠(yuǎn)哦!加油,前端甜小白....

如果我的分享對面前的這位大俠有所啟發(fā),懇請以程序員最高禮遇點(diǎn)? 星評論加分享的方式鼓勵(lì)我.

關(guān)注公眾號回復(fù):學(xué)習(xí) 領(lǐng)取前端最新最全學(xué)習(xí)資料,也可以進(jìn)群和大佬一起學(xué)習(xí)交流

image