Vue2 5筆記 Vue的例項與生命週期

理解與認識 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 例項的時候，我們可以傳入乙個選項物件，如data、el、methods、生命週期鉤子函式等等。

從上面的我們看到我們的例項已經掛在到 dom 元素上，資料和方法都已經擁有。最後我們就是要把這些資料怎麼顯示到我們到眼前，這裡就需要用到 vue 另乙個知識點模版了。

hello }

我們只需要使用模版的 } 語法將我們的資料繫結到檢視上就能顯示我們要的結果。

如果你以為僅僅是這麼簡單那你就太年輕了，我們也就沒有使用 vue 的必要了，當我們建立乙個例項時，vue 會把檢視與資料進行連線，當我們修改資料時，檢視會自動更新。

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

除了上面我們所說的資料的屬性以外，vue 給我們暴露了很多的例項與方法，例如：「dat

a」、「

data」、「

data」、

「el」、「wat

ch」、

「watch」、「

watch」

、「refs」、「wat

ch」、

「watch」、「

watch」

、「mount」等等，如果你對等多的例項屬性與方法感興趣可以移至api 參考，不過後面我們也會介紹一些常用的方法和屬性 watch、methods、refs等

vue 例項不盡帶了很多等例項方法與屬性，還自帶了很多 api 其中全域性的有 11 個，全域性配置的有 9個，如果想檢視也是在上面的鏈結中。

vue 例項會有乙個完整的生命週期，從例項的初始化，設定資料、編譯模板、將例項掛載到 dom 更新資料，銷毀等一系列的過程，稱為生命週期，在不同的過程中會自動執行一些函式，我們稱為生命週期鉤子函式。vue 給了我們很多生命週期函式，我們可以在整個生命週期的不同過程中使用它。

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

我們可以看到從例項開始建立到渲染掛載到 dom 結束後，會執行的鉤子函式，下面我們來嘗試進行資料的更新與銷毀例項看看鉤子是怎麼執行的。

這邊文章主要是介紹了下 vue 的例項與生命週期，在vue 例項化的過程中我們可以新增許多可選物件，比如 data、methods、生命週期鉤子函式等，讓例項產生我們想要的行為。

例項建立完成之後，我們就可以讓它與檢視同步，只要我修改資料檢視會自動跟著同步。

在例項的建立過程中會存在許多的生命週期鉤子函式，它會在我們例項的不同階段產生不同的效果。