Vue中生命周期的示例分析

這篇文章將為大家詳細講解有關Vue中生命周期的示例分析，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

最簡單的Vue 實例

//html
<div id="app">
 {{message}}
</div>

//javascript
var vm = new Vue({
 el: '#app',
 data: {
 message: 'Hello Vue!'
 }
})

由于 Vue 借鑒了 MVVM 的思想，這里的字符串 "Hello Vue!" 就相當于 Model，DOM 就相當于 View，Vue 實例 "vm" 則是起連接 Mode 和 View 作用的 ViewModel，因此我們才得以通過數據驅動視圖，而不需要關心它是怎么實現的，因為 Vue 已經幫我們做好了一切。

Vue 實例內置的屬性和方法都是以 "$" 開頭的，例如：vm.$data、vm.$el 等，另外選項并不等于實例，選項是通過 new Vue() 構造函數時傳入的參數對象，但是實例可以從暴露的接口訪問某些選項的值，例如：console.log(vm.$data.message) 輸出 "Hello Vue!"。

實例的生命周期

在創建實例的過程中，Vue 提供了一些生命周期鉤子函數，允許我們再某一特定階段執行一些額外的操作：

beforeCreate：

在實例初始化之后，數據綁定之前會調用這個函數，例如：

//javascript
var vm = new Vue({
 el: '#app',
 data: {
  message: 'Hello Vue!'
 },
 beforeCreate: function() {
  console.log(this.message); //undefind
 }
})

需要說明的有兩點：1、這里的 "this" 指向 Vue 實例，即 "vm"，2、Vue 實例同時也代理了選項中 "data" 下的所有屬性，也就是說 vm.message == vm.$data.message == "Hello Vue!"，但是因為在這個階段數據并沒有綁定到 Vun 實例上面，所以輸出 "undefind"。在這之前數據會先保存在 vm.$options 中，如果要在這個階段獲取數據，可以先通過 vm.$options.data() 方法，返回 "data" 對象，通過 vm.$options.data().message 返回對應的值。
在這個階段可以做一些不需要數據的工作，比如說開啟全局 loading 效果。

created：

在實例創建完成，數據綁定之后會調用這個函數，此時 console.log(this.message) 輸出正確的值 "Hello Vue!"。
在這個階段，數據已經初始化為選項中的默認值，但是真實的數據還要通過 ajax 從后端數據庫獲取，因此這個階段可以向后端發請求獲取數據，然后綁定到對應屬性上。

之后判斷選項中有無 "el" 屬性(作為 Vue 實例的掛載目標，在這里就是 id 為 app 的 div 標簽)，如果沒有，則需要手動調用 vm.$mount(el) 方法指定掛載的目標；

接著判斷選項中有無 "template" 屬性，如果沒有，則直接使用 "el" 屬性指定的掛載目標，如果有，那么就用 "template" 屬性指定的字符串模板替換掛載目標，掛載目標中的所有內容將被忽略；

beforeMount：

在實例掛載之前調用。

在這個階段可以移除全局 loading 效果。

mounted：

在實例掛載之后調用。

在這個階段頁面已經加載完畢，可以對 DOM 進行操作。

beforeUpdate：

在數據更新時調用。

在這個階段可以在數據更新前訪問現有的 DOM。

updated：

在數據更新之后調用。

在這個階段可以對更新后的 DOM 進行操作。

關于“Vue中生命周期的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。