大致分為8個生命週期
- beforeCreate
例項化之前，el 和 data 並未初始化
2.created
例項化之後，data初始化，不能訪問到$el屬性
3.beforeMount
能訪問到$el屬性,元件掛載之前，資料未顯示，但是虛擬dom已經配置完成
4.mounted
元件掛載完成
5.beforeUpdate
元件更新前，頁面仍然未更新，但是虛擬dom已經配置
6.updated
元件更新，頁面更新
7.beforeDestroyed
呼叫例項的destroy( )方法可以銷燬當前的元件，在銷燬前，會觸發beforeDestroy鉤子。
8.destroyed
Vue 例項銷燬後呼叫。呼叫後，Vue 例項指示的所有東西都會解繫結，所有的事件監聽器會被移除，所有的子例項也會被銷燬。
emmm...,還有3個生命週期,詳見
9.activated
keep-alive元件啟用時呼叫。該鉤子在伺服器端渲染期間不被呼叫。
- deactivated
keep-alive元件停用時呼叫。該鉤子在伺服器端渲染期間不被呼叫。
- errorCaptured
當捕獲一個來自子孫元件的錯誤時被呼叫。此鉤子會收到三個引數：錯誤物件、發生錯誤的元件例項以及一個包含錯誤來源資訊的字串。此鉤子可以返回 false 以阻止該錯誤繼續向上傳播
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">{{message}}</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
message: `hello`
},
template: '<div id="app"><p>{{message}}</p></div>',
beforeCreate() {
console.log('呼叫beforeCreate')
console.log(this.message)
console.log(this.$el)
},
created() {
console.log('呼叫created')
console.log(this.message)
console.log(this.$el)
},
beforeMount() {
console.log('呼叫beforeMount')
console.log(this.message)
console.log(this.$el)
},
mounted() {
console.log('呼叫mounted')
console.log(this.message)
console.log(this.$el)
},
beforeUpdate() {
console.log('呼叫beforeUpdate')
console.log(this.message)
console.log(this.$el)
},
updated() {
console.log('呼叫updated')
console.log(this.message)
console.log(this.$el)
},
beforeDestory() {
console.log('呼叫beforeDestory')
console.log(this.message)
console.log(this.$el)
},
destoryed() {
console.log('呼叫Destoryed')
console.log(this.message)
console.log(this.$el)
}
})
vm.message = `gaoxuerong`
</script>
</html>
複製程式碼