Vue基礎之生命週期函式[殘缺版]！
阿新 • • 發佈：2020-12-08
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>