Vue2.5筆記：Vue的實例與生命周期

Ashin 發(fā)布于2019-08-23 12:10 / 1552人閱讀

摘要：總結(jié)這邊文章主要是介紹了下的實例與生命周期，在實例化的過程中我們可以添加許多可選對象，比如生命周期鉤子函數(shù)等，讓實例產(chǎn)生我們想要的行為。

理解與認識 Vue 的實例是我們學(xué)習(xí) Vue 非常重要的一步，也是非常必須的，因為實例是它的一個起點，也是它的一個入口，只有我們創(chuàng)建一個 Vue 實例之后，我們才行利用它進行一些列的操作。

首先 Vue 沒有完全遵守 MVVM 的架構(gòu)模式，但是它的設(shè)計也受到了該模式的啟發(fā)，Vue 也就是在該模式中起到 VM（ViewModel）的作用。如果有對 MVC、MVVM 模式不了解的同學(xué)可以參考阮一峰老師的《MVC，MVP 和 MVVM 的圖示》這篇文章可以對它們有一個簡單對了解。

Vue 的實例從創(chuàng)建到使用以及銷毀的過程中會有多個生命周期鉤子，這些鉤子在我們整個的實例過程中起到了非常重要，而且有了這些鉤子我們可以很好的去控制我們的整個過程的邏輯。

Vue 借鑒了 MVVM 架構(gòu)模式，Vue 在整個過程中起到的就是 VM 的作用，如果我們對 MVVM 有過了解，V 即 View（視圖層）就是我們看到的模版HTML，M 即 Model（數(shù)據(jù)層）就是我們想要顯示出來的數(shù)據(jù)，Vue 就是負責(zé)把 View－Model 連接起來。

創(chuàng)建Vue實例

每個 Vue 實例都是通過 Vue 函數(shù)來創(chuàng)建的，在 Vue 中的每一個應(yīng)用都是會創(chuàng)建一個實例，組件也是一個實例。

當創(chuàng)建一個 vue 實例的時候，我們可以傳入一個選項對象，如data、el、methods、生命周期鉤子函數(shù)等等。

var vm = new Vue({
  el: "#root",
  data: {
    name: "Modeng"
  },
  methods: {
    handleClick () {
        console.log(123);
    }
  }
})

從上面的圖片我們看到我們的實例已經(jīng)掛在到 DOM 元素上，數(shù)據(jù)和方法都已經(jīng)擁有。最后我們就是要把這些數(shù)據(jù)怎么顯示到我們到眼前，這里就需要用到 Vue 另一個知識點模版了。


    Hello {{name}}

我們只需要使用模版的 {{}} 語法將我們的數(shù)據(jù)綁定到視圖上就能顯示我們要的結(jié)果。

如果你以為僅僅是這么簡單那你就太年輕了，我們也就沒有使用 Vue 的必要了，當我們創(chuàng)建一個實例時，Vue 會把視圖與數(shù)據(jù)進行連接，當我們修改數(shù)據(jù)時，視圖會自動更新。

有一點值得我們注意的是，我們在使用 Vue 實例時，需要關(guān)注下 this，千萬不要在含有 this 的函數(shù)時，使用箭頭函數(shù)，因為箭頭函數(shù)是沒有綁定 this 的，所以會出現(xiàn)問題。

實例的屬性、方法與 API

除了上面我們所說的數(shù)據(jù)的屬性以外，Vue 給我們暴露了很多的實例與方法，例如：「$data」、「$el」、「$watch」、「$refs」、「$watch」、「$mount」等等，如果你對等多的實例屬性與方法感興趣可以移至API 參考，不過后面我們也會介紹一些常用的方法和屬性 watch、methods、refs等

Vue 實例不盡帶了很多等實例方法與屬性，還自帶了很多 API 其中全局的有 11 個，全局配置的有 9個，如果想查看也是在上面的鏈接中。

生命周期構(gòu)子

Vue 實例會有一個完整的生命周期，從實例的初始化，設(shè)置數(shù)據(jù)、編譯模板、將實例掛載到 DOM 更新數(shù)據(jù)，銷毀等一系列的過程，稱為生命周期，在不同的過程中會自動執(zhí)行一些函數(shù)，我們稱為生命周期鉤子函數(shù)。Vue 給了我們很多生命周期函數(shù)，我們可以在整個生命周期的不同過程中使用它。

下圖展示了實例的生命周期。你不需要立馬弄明白所有的東西，不過隨著你的不斷學(xué)習(xí)和使用，它的參考價值會越來越高。

beforeCreate：在實例初始化之后，數(shù)據(jù)觀測 (data observer) 和 event/watcher 事件配置之前被調(diào)用。

created：在實例創(chuàng)建完成后被立即調(diào)用。在這一步，實例已完成以下的配置：數(shù)據(jù)觀測 (data observer)，屬性和方法的運算，watch/event 事件回調(diào)。然而，掛載階段還沒開始，「$el」屬性目前不可見。

beforeMount：在掛載開始之前被調(diào)用：相關(guān)的 render 函數(shù)首次被調(diào)用。

mounted：el 被新創(chuàng)建的 vm.$el 替換，并掛載到實例上去之后調(diào)用該鉤子。如果 root 實例掛載了一個文檔內(nèi)元素，當 mounted 被調(diào)用時 vm.$el 也在文檔內(nèi)。

beforeUpdate：數(shù)據(jù)更新時調(diào)用，發(fā)生在虛擬 DOM 打補丁之前。這里適合在更新之前訪問現(xiàn)有的 DOM，比如手動移除已添加的事件監(jiān)聽器。

updated：由于數(shù)據(jù)更改導(dǎo)致的虛擬 DOM 重新渲染和打補丁，在這之后會調(diào)用該鉤子。

當這個鉤子被調(diào)用時，組件 DOM 已經(jīng)更新，所以你現(xiàn)在可以執(zhí)行依賴于 DOM 的操作。然而在大多數(shù)情況下，你應(yīng)該避免在此期間更改狀態(tài)。如果要相應(yīng)狀態(tài)改變，通常最好使用計算屬性或 watcher 取而代之。

activated：keep-alive 組件激活時調(diào)用。

deactivated：keep-alive 組件停用時調(diào)用。

beforeDestroy：實例銷毀之前調(diào)用。在這一步，實例仍然完全可用。

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

errorCaptured：2.5.0+ 新增，當捕獲一個來自子孫組件的錯誤時被調(diào)用。此鉤子會收到三個參數(shù)：錯誤對象、發(fā)生錯誤的組件實例以及一個包含錯誤來源信息的字符串。此鉤子可以返回 false 以阻止該錯誤繼續(xù)向上傳播。

var vm = new Vue({
  el: "#root",
  data: {
    name: "Modeng",
  },
  beforeCreate() {
    console.log("實例初始化");
    console.log("beforeCreate");
    console.log("------------------");
  },
  created() {
    console.log("實例創(chuàng)建完成");
    console.log("created");
    console.log("------------------");
  },
  beforeMount () {
    console.log("實例掛載DOM之前");
    console.log("beforeMount");
    console.log("------------------");
  },
  mounted () {
    console.log("實例掛載DOM完成");
    console.log("mounted");
    console.log("------------------");
  },
  beforeUpdate () {
    console.log("實例的數(shù)據(jù)更新之前");
    console.log("beforeUpdate");
    console.log("------------------");
  },
  updated () {
    console.log("實例的數(shù)據(jù)更新完成，DOM更新");
    console.log("updated");
    console.log("------------------");
  },
  beforeDestroy () {
    console.log("實例銷毀之前");
    console.log("beforeDestory");
    console.log("------------------");
  },
  destroyed () {
    console.log("實例銷毀完成");
    console.log("destoryed");
    console.log("------------------");
  }
});

我們可以看到從實例開始創(chuàng)建到渲染掛載到 DOM 結(jié)束后，會執(zhí)行的鉤子函數(shù)，下面我們來嘗試進行數(shù)據(jù)的更新與銷毀實例看看鉤子是怎么執(zhí)行的。

總結(jié)

這邊文章主要是介紹了下 Vue 的實例與生命周期，在Vue 實例化的過程中我們可以添加許多可選對象，比如 data、methods、生命周期鉤子函數(shù)等，讓實例產(chǎn)生我們想要的行為。

實例創(chuàng)建完成之后，我們就可以讓它與視圖同步，只要我修改數(shù)據(jù)視圖會自動跟著同步。

在實例的創(chuàng)建過程中會存在許多的生命周期鉤子函數(shù)，它會在我們實例的不同階段產(chǎn)生不同的效果。

關(guān)注微信公眾號：六小登登。領(lǐng)取全套學(xué)習(xí)資源