2. 程式人生 > >前端框架vue.js系列（10）：生命週期鉤子函式

前端框架vue.js系列（10）：生命週期鉤子函式

阿新 • • 發佈：2019-01-19

每個vue例項在被建立之前都要經過一系列的初始化過程。例如需要設定資料監聽、編譯模板、掛載例項到dom、在資料變化時更新dom等。同時在這個過程中也會執行一些叫做生命週期鉤子的函式，給予使用者機會在一些特定的場景下新增他們自己的程式碼。

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

例項中的生命週期鉤子可以分為以下8種情況：
beforeCreate: 例項剛被建立，vue所有屬性都還不存在
created: 例項建立完成，但$el還不存在
beforeMount:掛載之前
mounted:掛載之後，即data中的數值已經被渲染到元素中
beforeUpdate:更新之前
updated:更新之後
activated:<keep-alive>元件被啟用時
deactivated:<keep-alive>元件移除時
beforeDestroy:例項被銷燬前
destroyed:例項被銷燬後

請看一個生命週期鉤子Demo：

<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="../js/libs/vue/2.4.2/vue.js"></script>
	</head>

	<body>
		<div id="app">
			<p>{{ message }}</p>
			<button @click="updateMsg">updateMsg</button>
			<button @click="destroy">destroy</button>
		</div>
	</body>

	<script>
		var app = new Vue({
			el: '#app',
			data: {
				message: "hello world",
				currentView: 'dt1'
			},
			methods: {
				updateMsg: function() {
					this.message = "i be clicked";
				},
				destroy: function() {
					app.$destroy();
				}
			},
			beforeCreate: function() {
				console.group('beforeCreate 建立前狀態===============》');
				console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
				console.log("%c%s", "color:red", "data   : " + this.$data); //undefined 
				console.log("%c%s", "color:red", "message: " + this.message); //undefined 
			},
			created: function() {
				console.group('created 建立完畢狀態===============》');
				console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
				console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化 
				console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
			},
			beforeMount: function() {
				console.group('beforeMount 掛載前狀態===============》（虛擬Dom技術，先把坑佔住了。到後面mounted掛載的時候再把值渲染進去)');
				console.log("%c%s", "color:red", "el     : " + (this.$el)); //已被初始化,但實際上還沒有渲染data中的數值到元素
				console.log(this.$el);
				console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化  
				console.log("%c%s", "color:red", "message: " + this.message); //已被初始化  
			},
			mounted: function() {
				console.group('mounted 掛載結束狀態===============》');
				console.log("%c%s", "color:red", "el     : " + this.$el); //已被初始化
				console.log(this.$el);
				console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化
				console.log("%c%s", "color:red", "message: " + this.message); //已被初始化 
			},
			beforeUpdate: function() {
				console.group('beforeUpdate 更新前狀態===============》（虛擬Dom技術，先把坑佔住了。到後面mounted掛載的時候再把值渲染進去)');
				console.log("%c%s", "color:red", "el     : " + this.$el);
				console.log(this.$el);
				console.log("%c%s", "color:red", "data   : " + this.$data);
				console.log("%c%s", "color:red", "message: " + this.message);
			},
			updated: function() {
				console.group('updated 更新完成狀態===============》');
				console.log("%c%s", "color:red", "el     : " + this.$el);
				console.log(this.$el);
				console.log("%c%s", "color:red", "data   : " + this.$data);
				console.log("%c%s", "color:red", "message: " + this.message);
			},
			activated: function() {
				console.group('activated <keep-alive>元件被啟用時狀態===============》');
				console.log("%c%s", "color:red", "el     : " + this.$el);
				console.log(this.$el);
				console.log("%c%s", "color:red", "data   : " + this.$data);
				console.log("%c%s", "color:red", "message: " + this.message);
			},
			deactivated: function() {
				console.group('deactivated <keep-alive>元件被移除時狀態===============》');
				console.log("%c%s", "color:red", "el     : " + this.$el);
				console.log(this.$el);
				console.log("%c%s", "color:red", "data   : " + this.$data);
				console.log("%c%s", "color:red", "message: " + this.message);
			},
			beforeDestroy: function() {
				console.group('beforeDestroy 銷燬前狀態===============》');
				console.log("%c%s", "color:red", "el     : " + this.$el);
				console.log(this.$el);
				console.log("%c%s", "color:red", "data   : " + this.$data);
				console.log("%c%s", "color:red", "message: " + this.message);
			},
			destroyed: function() {
				console.group('destroyed 銷燬完成狀態===============》（銷燬後vue失效，但元素還在）');
				console.log("%c%s", "color:red", "el     : " + this.$el);
				console.log(this.$el);
				console.log("%c%s", "color:red", "data   : " + this.$data);
				console.log("%c%s", "color:red", "message: " + this.message)
			}
		})
	</script>

</html>

執行結果：


當點選updateMsg按鈕後，執行更新相關的鉤子函式：

當點選destroy按鈕後，執行銷燬相關的鉤子函式：

相關推薦

前端框架vue.js系列（10）：生命週期鉤子函式

每個vue例項在被建立之前都要經過一系列的初始化過程。例如需要設定資料監聽、編譯模板、掛載例項到dom、在資料變化時更新dom等。同時在這個過程中也會執行一些叫做生命週期鉤子的函式，給予使用者機會在一些特定的場景下新增他們自己的程式碼。 下圖說明了例項的生命週期。你不需要立

前端框架vue.js系列（4）：事件修飾符與按鍵修飾符

vue修飾符是指在觸發事件或按鍵時額外的觸發條件或回撥。比如點選事件只允許觸發一次，可以使用@click.once。 原生事件物件 vue可以通過以下方式，獲取原生的事件物件： <button @click="getEventDom($event);">

前端框架Aurelia——元件Component（二）元件生命週期

constructor() - The view-model's constructor is called first.created(owningView: View, myView: View

前端JS框架——Vue.js筆記（一）

基本的Vue程式碼結構： 插值表示式： v-text: 使用v-cloak解決v-text閃爍問題： 使用v-html對html格式文字進行渲染 使用v-bind進行資料繫結： 它的縮寫是: 使用v-on進行事件監聽繫結： 它的縮寫是@符號 事件修飾符：

Vue.js學習（五）：vue+axios+php+mysql 實現前端介面資料動態更新

網上參考了很多例子，都沒有關於vue+php實現前後端的例子，後來自己總結了一個，希望大家批評指正。 vue實現動態資料的方式主要有vue-resource和axios，但是從Vue2.0開始，已經不

arcgis jsapi介面入門系列（10）：圖形高亮

jsapi也有提供高亮的實現介面，但這裡沒用，而用的是一種改變圖形（graphic）樣式的思路 本文實現效果是：地圖有多個面圖形，當滑鼠移動到面的上方，面高亮顯示，滑鼠移出後高亮解除 初始化 //高亮初始化 highlightInit: function

初識vue 2.0（10）：使用$parent、$children父子元件通訊

使用 this.$parent查詢當前元件的父元件。使用 this.$children查詢當前元件的直接子元件，可以遍歷全部子元件， 需要注意 $children 並不保證順序，也不是響應式的。使用 this.$root查詢根元件，並可以配合$children遍歷全部元件。使用 this.$refs查詢命名子

Vue.js教程（一）：基本使用

vue.js是一套漸進式Javascript框架。是一個小巧好用的框架。 簡介 Vue既然是一個js框架，那麼基本上js能做的事情它都能做。Vue跟大多數js框架類似，都是優化js對DOM的操作。什麼是DOM操作呢？看下面： <div id="app"

Vue.js教程（二）：v-bind動態屬性

上一節我們學習了Vue的基本語法，裡面有個佔位變數{{message}}。這種{{message}}形式的vue變數只適合給標籤中的文字複製（開始標籤和結束標籤中間的文字）。v-bind是給屬性設定變數的。 簡介 v-bind是給屬性設定變數的。屬性和文字的

Vue.js教程（三）：v-if條件判斷

v-if是繼v-bind之後的又一個v-xxx系列 前言 v-if這是我們學習Vue中的的第二個v-xxx系列。學到這裡，不得不提一下的是，所有v-bind或者v-if所關聯的都是Vue的動態變數，

Vue.js教程（四）：v-for迴圈操作

前言 本篇主要是Vue的迴圈操作，需要遍歷陣列。所以本篇嚴格來說有兩個知識點： 1、v-for迴圈使用 2、vue中陣列的定義 v-for基本使用 1、定義陣列 <script type="text/javascript"> var app4

深度學習框架Keras學習系列（一）：線性代數基礎與numpy使用（Linear Algebra Basis and Numpy）

又開一個新坑~~ 因為確實很有必要好好地趁著這個熱潮來研究一下深度學習，畢竟現在深度學習因為其效果突出，熱潮保持高漲不退，上面的政策方面現在也在向人工智慧領域傾斜，但是也有無數一知半解的人跟風吹捧，於是希望藉此教程，讓自己和讀者一起藉助keras，從上到下逐漸

解讀ASP.NET 5 & MVC6系列（10）：Controller與Action

我們知道在MVC5和之前的版本，兩個框架的生命週期是不一樣的，在新版MVC6中，MVC Controller/Web API Controller已經合二為一了，本章我們主要講解Controller和Action的定義與使用，以及在MVC框架中，如何根據路由查詢相應的Controller和Action。 Co

MVC之前的那點事兒系列（10）：MVC為什麼不再需要註冊萬用字元（*.*）了？

文章內容 很多教程裡都提到了，在部署MVC程式的時候要配置萬用字元對映（或者是*.mvc）到aspnet_ISPAI.dll上，在.NET4.0之前確實應該這麼多，但是.NET4.0之後已經不要再費事了，因為它預設就支援了。 你可以會問，沒有對映配置，請求這麼可能會走到aspnet_ISPAI.dll

Vue.js教程（六）：v-model表單操作

v-model和v-bind有點類似，都是用來繫結標籤屬性的。但是v-model是表單控制元件操作，在其他標籤是不好使。 簡介 v-model是用來配合表單控制元件實現文字實時顯示的效果（雙向繫結效果）。 v-model基本使用 如下程式碼效果，修改了表單中

maven系列-（四）maven生命週期和外掛

前面講了maven的依賴和倉庫，這是經常接觸到的一些操作。但是我們平時還會接觸到maven生命週期的一些操作，比如打包、編譯等，maven就可以把我們的專案進行打包、編譯。其實這個過程，還是涉及到很多知識點的，只不過我們在操作過程中察覺不到而已。 我們在專案開發中都會涉及到清理、編譯、測

深入理解JavaScript系列（4）：立即呼叫的函式表示式

javascript 函式function前面的一元操作符, 感嘆號、小括號、一元操作符!()+-|| 看下面內容之前可以先看看上面的文章，總結的非常贊 前言 大家學JavaScript的時候，經常遇到自執行匿名函式的程式碼，今天我們主要就來想想說一下自執行 在詳細

C++（10）：VS2015使用某些函式顯示不安全需要末尾新增_s的解決辦法

執行程式出現錯誤提示: 'fopen': This function or variable may be unsafe. Consider using fopen_s instead. To disable deprecation, use _CRT_SECURE_NO_

Android 開發：（六）Activity生命週期以及函式意義

簡述：   1.在日常應用中Activity是與使用者互動的介面，它提供了一個使用者完成相關操作的視窗。當我們在開發中建立Activity後，通過呼叫setContentView(View)方法來給該Activity指定一個佈局介面，而這個介面就是提供給使用者互動的介面。Androi

Angular 個人深究（四）【生命週期鉤子】

Angular 個人深究（四）【生命週期鉤子】 定義： 每個元件都有一個被 Angular 管理的生命週期。 Angular 建立它，渲染它，建立並渲染它的子元件，在它被繫結的屬性發生變化時檢查它，並在它從 DOM 中被移除前銷燬它。 Angular 提供了生命週期鉤子，把這些關鍵生命時刻暴露出來，賦