文章目錄
生命週期函數簡介
Vue官方文檔在第一章就提到了生命週期,但對於初學者來說可能看上會一頭霧水。這裏的生命週期指的是Vue實例(或者Vue組件),在頁面中創建-運行-銷燬的三個階段。要想完全看懂生命週期是如果運行的需要對Vue實例有一定了解,至少知道Vue實例中的data、methods是幹什麼的。如果你還對此一無所知可以看一下我另一篇Vue入門博客(看到屬性綁定即可)。
生命週期函數總共有八個,其中:
- 創建期間函數有:
beforeCreate、created、beforeMount、mounted； - 運行期間的函數有:
beforeUpdate、updated； - 銷燬期間的函數有:
beforeDestroy、destroyed。
官方文檔中有一張圖比較詳細的介紹了每個部分執行的函數,下方爲官方文檔圖片的漢化版
從上圖我們能明顯看出,整個生命週期指的是在new Vue()創建之後到new Vue()被銷燬的整個過程。因爲new Vue()已經被創建,所以我們什麼週期函數就可以在其中作爲方法使用。
創建期間
beforeCreate
beforeCreate直譯爲創造之前,這裏創建之前指的是Vue被實例化(new Vue()已經被創建),但data、methods都還沒用創建的時候。
created
此時data和methods已經被創建,可以使用了。模板還沒有被編譯。
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>dome25</title>
</head>
<body>
<div id ="app">
<p id='vueData'>{{vdata}}</p>
<button @click="event">methods</button>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
// 創建Vue實例
new Vue({
el: '#app',
data: {
vdata: ['vue的data屬性已經被創建']
},
methods: {
event(){
this.vdata.push("vue的methods屬性也已經被創建")
}
},
// 使用beforeCreate
beforeCreate(){
console.log("===========(當前爲beforeCreate)")
console.log(this.vdata)
console.log(this.event)
console.log("===========(當前爲beforeCreate)")
},
// 使用created
created(){
console.log("===========(當前爲created)")
console.log(this.vdata)
console.log(this.event)
console.log("===========(當前爲created)")
}
});
</script>
</html>
beforeMount
created的下一階段,此時模板已經被編譯了,但沒有掛載到頁面中。
mounted
此時模板代碼已經被加載到頁面中了,此時創建的所以事情都已經準備好了,網頁開始運行了。
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>dome25</title>
</head>
<body>
<div id ="app">
<p id='vueData'>{{vdata}}</p>
<button @click="event">methods</button>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
// 創建Vue實例
new Vue({
el: '#app',
data: {
vdata: ['vue的data屬性已經被創建']
},
methods: {
event(){
this.vdata.push("vue的methods屬性也已經被創建")
}
},
// 使用beforeMount
beforeMount(){
console.log("===========(當前爲beforeMount)")
console.log(document.getElementById('vueData'))
console.log("===========(當前爲beforeMount)")
},
// 使用mounted
mounted(){
console.log("===========(當前爲mounted)")
console.log(document.getElementById('vueData'))
console.log("===========(當前爲mounted)")
},
});
</script>
</html>
運行期間
beforeUpdate
在網頁運行期間,data中的數據如果更新了就會觸發此方法。在這個階段data中的數據已經進行了更新,但並沒有在模板中進行更新,所以頁面還沒有發生變化
updated
這個階段數據不僅在data中更新了,也在頁面中更新完成了。算是更新完成的狀態。
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>dome26</title>
</head>
<body>
<div id ="app">
<p id='vueData'>{{vdata}}</p>
<button @click="event">methods</button>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
// 創建Vue實例
new Vue({
el: '#app',
data: {
vdata: ['vue的data屬性已經被創建']
},
methods: {
event(){
this.vdata.push("vue的methods屬性也已經被創建")
}
},
// 使用beforeUpdate
beforeUpdate(){
console.log("===========(當前爲beforeUpdate)")
console.log('從頁面中獲取的vdata信息: '+document.getElementById('vueData').innerText)
console.log('從實例中獲取的vdata信息: '+this.vdata)
console.log("===========(當前爲beforeUpdate)")
},
updated(){
console.log("===========(當前爲updated)")
console.log('從頁面中獲取的vdata信息: '+document.getElementById('vueData').innerText)
console.log('從實例中獲取的vdata信息: '+this.vdata)
console.log("===========(當前爲updated)")
}
});
</script>
</html>
銷燬期間
beforeDestroy
Vue實例在這個階段是已經收到了銷燬指令,但指令卻還沒有執行的時候。這時候Vue中所有的屬性都是可以使用的。注意:這裏的銷燬指的是解綁了事件的監聽還有watcher對象數據與view的綁定,而不是頁面。如果你想做在關閉窗口的時候彈出的一個提示框使用生命週期函數是無法實現的!
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>dome27</title>
</head>
<body>
<div id ="app">
<button @click="texts">測試</button>
<des v-if="vitem"></des>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
Vue.component('des', {
template: '<p id="uid">這裏是模板</p>',
data(){
return{
value: '默認值'
}
},
methods: {
change(){
this.value = '我被改變了'
}
},
beforeDestroy(){
console.log('=======')
console.log(this.value)
console.log(this.change)
console.log(document.getElementById('uid'))
console.log('=======')
}
})
// 創建Vue實例
new Vue({
el: '#app',
data: {
vitem: true
},
methods: {
texts(){
this.vitem = this.vitem ? false : true
}
}
});
</script>
</html>
destroyed
Vue實例已經被完全銷燬後執行,次數Vue實例上所以東西都會解綁,所以時間都會被移除,所有子元素都會銷燬。
銷燬期間的函數使用較少,功能性較少,如果你想實現類似csdn寫博客未保存關閉頁面時彈出的提示可以瞭解一下Vue-Router的導航守衛。這位博主就詳細寫了如果用導航守衛來實現關閉提示未保存的彈窗。