Vue基礎之生命週期函數[殘缺版]！

時間 2020-12-08

標籤 javascript vue java app 函數 this code server 對象生命週期欄目 JavaScript 简体版

原文原文鏈接

Vue基礎之生命週期函數[殘缺版]！

爲何說是殘缺版呢？! 由於有一些周期函數我並無學到！因此是殘缺版！

01 beforeCreate

//在實例初始化以後，數據觀測 (data observer) 和 event/watcher 事件配置以前被調用。// 簡單理解就是整個頁面建立以前調用的生命週期!

02 created

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

03 beforeMount

//在掛載開始以前被調用：相關的渲染函數首次被調用

04 mounted

//el 被新建立的 vm.$el 替換, 掛載成功

05 beforeUpdate

//數據更新時調用
// 數據變化以前調用的一個函數!

06 updated

//組件 DOM 已經更新, 組件更新完畢

舒適提醒

// 生命週期須要寫在new Vue 傳遞的這個對象內!以屬性的方式進行聲明!這個屬性他是一個函數!在 Vue運行的每一個階段, 會調用以生命的周期函數!!
// 有一點須要注意, 就是生命週期函數是不能使用箭頭函的!由於箭頭函數沒有this!

<body>
		<div id="app">
			{{msg}}
		</div>
		<script type="text/javascript">
			// 生命週期須要寫在new Vue 傳遞的這個對象內!以屬性的方式進行聲明!這個屬性他是一個函數!在 Vue運行的每一個階段, 會調用以生命的周期函數!!
				// 有一點須要注意, 就是生命週期函數是不能使用箭頭函的!由於箭頭函數沒有this!
				var vm = new Vue({
					el: "#app",
					data: {
						msg: "hi vue",
					},
					//在實例初始化以後，數據觀測 (data observer) 和 event/watcher 事件配置以前被調用。
					// 簡單理解就是整個頁面建立以前調用的生命週期!
					beforeCreate: function() {
						console.log('beforeCreate');
					},
					/* 在實例建立完成後被當即調用。
					在這一步，實例已完成如下的配置：數據觀測 (data observer)，屬性和方法的運算，watch/event 事件回調。
					然而，掛載階段還沒開始，$el 屬性目前不可見。 */
					created: function() {
						console.log('created');
					},
					//在掛載開始以前被調用：相關的渲染函數首次被調用
					beforeMount: function() {
						console.log('beforeMount');

					},
					//el 被新建立的 vm.$el 替換, 掛載成功	
					mounted: function() {
						console.log('mounted');

					},
					//數據更新時調用
					// 數據變化以前調用的一個函數!
					beforeUpdate: function() {
						console.log('beforeUpdate');

					},
					//組件 DOM 已經更新, 組件更新完畢 
					updated: function() {
						console.log('updated');

					}
				});
			setTimeout(function() {
				vm.msg = "change ......";
			}, 3000);
		</script>
	</body>