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

Ashin 發布于2019-08-23 12:10 / 1554人閱讀

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

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

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

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

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

創建Vue實例

每個 Vue 實例都是通過 Vue 函數來創建的，在 Vue 中的每一個應用都是會創建一個實例，組件也是一個實例。

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

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

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


    Hello {{name}}

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

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

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

實例的屬性、方法與 API

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

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

生命周期構子

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

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

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

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

beforeMount：在掛載開始之前被調用：相關的 render 函數首次被調用。

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

beforeUpdate：數據更新時調用，發生在虛擬 DOM 打補丁之前。這里適合在更新之前訪問現有的 DOM，比如手動移除已添加的事件監聽器。

updated：由于數據更改導致的虛擬 DOM 重新渲染和打補丁，在這之后會調用該鉤子。

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

activated：keep-alive 組件激活時調用。

deactivated：keep-alive 組件停用時調用。

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

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

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

var vm = new Vue({
  el: "#root",
  data: {
    name: "Modeng",
  },
  beforeCreate() {
    console.log("實例初始化");
    console.log("beforeCreate");
    console.log("------------------");
  },
  created() {
    console.log("實例創建完成");
    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("實例的數據更新之前");
    console.log("beforeUpdate");
    console.log("------------------");
  },
  updated () {
    console.log("實例的數據更新完成，DOM更新");
    console.log("updated");
    console.log("------------------");
  },
  beforeDestroy () {
    console.log("實例銷毀之前");
    console.log("beforeDestory");
    console.log("------------------");
  },
  destroyed () {
    console.log("實例銷毀完成");
    console.log("destoryed");
    console.log("------------------");
  }
});

我們可以看到從實例開始創建到渲染掛載到 DOM 結束后，會執行的鉤子函數，下面我們來嘗試進行數據的更新與銷毀實例看看鉤子是怎么執行的。

總結

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

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

在實例的創建過程中會存在許多的生命周期鉤子函數，它會在我們實例的不同階段產生不同的效果。

關注微信公眾號：六小登登。領取全套學習資源

云服務器 GPU云服務器線程的生命周期 bug的生命周期 activity的生命周期 ios應用的生命周期

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/98030.html

vue入門筆記體系（二）vue生命周期

摘要：此時還未有選項鉤子函數和間的生命周期完成后，會有一個判斷過程，判斷對象是否有選項。鉤子函數和鉤子函數間的生命周期當發現中的數據發生了改變，會觸發對應組件的重新渲染，先后調用和鉤子函數。和鉤子函數間的生命周期鉤子函數在實例銷毀之前調用。 vue生命周期這是vue生命周期的圖示具體內容：showImg(https://segmentfault.com/img/bV4xju?w=1200&...

scola666 2019-08-23 10:30 評論0 收藏0
(原創)vue 學習筆記

摘要：菜鳥教程這是一個屬性其值是字符串菜鳥教程同上這是一個屬性其值是字符串用于定義的函數，可以通過來返回函數值。它們都有前綴，以便與用戶定義的屬性區分開來。開篇語我最近學習了js,取得進步,現在學習vue.js.建議新手學習,請不要用npm的方式(vue-cli,vue腳手架),太復雜了. 請直接下載vue.js文件本地引入,就上手學習吧參照菜鳥教程網站的vue.js教程http://...

layman 2019-08-22 18:09 評論0 收藏0
Vue2.5筆記：Vue中的模版

摘要：模版語法中的模版是基于的模版語法，所有的模版都是合法的，所以能被遵循規范的瀏覽器和解析器解析。表達式模版中不僅僅可以進行簡單的數據綁定操作，我們還可以在模版中進行簡單的表達式。我們也簡單的敘述了模版編譯的整個流程。我們在上一篇說到如何把 Vue 實例中的數據顯示到視圖中，就會需要用到我們的模版，我們只是簡單的使用了一些，模版其實還有很多其他的特性。今天我們就來看看模版的其他特性。模...

shevy 2019-08-23 12:11 評論0 收藏0
實例化vue發生了什么?(詳解vue生命周期)

摘要：實例化發生了什么詳解生命周期本文將對的生命周期進行詳細的講解讓你了解一個實例的誕生都經歷了什么我在上建立了一個存放筆記的倉庫以后會陸續更新一些知識和項目中遇到的坑有興趣的同學可以去看看哈歡迎傳送門實例化一個這是一個方法觸發鉤子函數組件實例剛實例化vue發生了什么?(詳解vue生命周期) 本文將對vue的生命周期進行詳細的講解,讓你了解一個vue實例的誕生都經歷了什么~ 我在Githu...

pcChao 2019-08-22 13:49 評論0 收藏0
再談Vue的生命周期----結合Vue源碼

摘要：中的生命周期函數也可以稱之為生命周期鉤子函數，在特定的時期，調用特定的函數。吊起鉤子函數調起鉤子函數問題為什么是一個數組卸載組件，會觸發一個這行代碼之后發生了什么背后實現原理。簡介關于Vue的生命周期函數，目前網上有許多介紹文章，但也都只是分析了表象。這篇文檔，將結合Vue源碼分析，為什么會有這樣的表象。 Vue中的生命周期函數也可以稱之為生命周期鉤子（hook）函數，在特定的時期...

KavenFan 2019-08-23 12:16 評論0 收藏0