Vue生命週期

Vue · 發表 2018-09-17 22:20:00

摘要：正如VUE的文件所說你不需要立馬弄明白所有的東西，不過隨著你的不斷學習和使用，它的參考價值會越來越高。下圖展示例項的生命週期在beforeCreate和created鉤子函式間的生命週期在beforeCreate和created之間，進行資料觀測(d...

正如VUE的文件所說

你不需要立馬弄明白所有的東西，不過隨著你的不斷學習和使用，它的參考價值會越來越高。

下圖展示例項的生命週期

在beforeCreate和created鉤子函式間的生命週期

在beforeCreate和created之間，進行資料觀測(data observer) ，

也就是在這個時候開始監控data中的資料變化了，同時初始化事件

created鉤子函式和beforeMount間的生命週期

紅框框住的部分需要理解一下

el選項的存在對整個生命週期的影響

在這裡，系統首先會 判斷有沒有el選項

如果有整個生命週期繼續進行

如果沒有，就停止了生命週期，直到 vm.$mount(el) ,

展示一下：

當有el選項時

<!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/[email protected]/dist/vue.js"></script>
</head>

<body>
<div id="app">

</div>
</body>
<script>
new Vue({
// el: "#app",
beforeCreate () {
console.log('呼叫了beforeCreat鉤子函式')
},
created () {
console.log('呼叫了created鉤子函式')
},
beforeMount () {
console.log('呼叫了beforeMount鉤子函式')
},
mounted () {
console.log('呼叫了mounted鉤子函式')
}
})
</script>

</html>

編譯後我們能在控制檯看到

當我再去掉el選項時

<!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/[email protected]/dist/vue.js"></script>
</head>

<body>
<div id="app">

</div>
</body>
<script>
new Vue({
// el: "#app",
beforeCreate () {
console.log('呼叫了beforeCreat鉤子函式')
},
created () {
console.log('呼叫了created鉤子函式')
},
beforeMount () {
console.log('呼叫了beforeMount鉤子函式')
},
mounted () {
console.log('呼叫了mounted鉤子函式')
}
})
</script>

</html>

我們又能看到

可以看到，生命週期的鉤子函式 執行到created就結束了

而當我們不加el選項，但是手動執行 vm.$mount(el) 方法的話，也能夠使暫停的生命週期進行下去

eg:

<!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/[email protected]/dist/vue.js"></script>
</head>

<body>
<div id="app">

</div>
</body>
<script>
var vm = new Vue({
// el: "#app",
beforeCreate () {
console.log('呼叫了beforeCreat鉤子函式')
},
created () {
console.log('呼叫了created鉤子函式')
},
beforeMount () {
console.log('呼叫了beforeMount鉤子函式')
},
mounted () {
console.log('呼叫了mounted鉤子函式')
}
})
vm.$mount('#app')
</script>

</html>

在控制檯中就會出現

所以，就算是沒有el選項，

但是通過vm.$mount('#app')動態新增的方式，還是能夠使生命週期進行下去

beforeUpdate鉤子函式和updated鉤子函式間的生命週期

在Vue中，資料更改會導致虛擬 DOM 重新渲染，並先後呼叫beforeUpdate鉤子函式和updated鉤子函式

但是注意一點：重渲染的前提是更改的資料寫入了Vue例項的模板中，

var vm = new Vue({
el: '#app',
data: {
number: 1
},
template: '<div id="app"><p></p></div>',
beforeUpdate: function () {
console.log('呼叫了beforeUpdate鉤子函式')
},
updated: function () {
console.log('呼叫了updated鉤子函式')
}
})
 
vm.number = 2

但是控制檯是空空如也啊

那我更改程式碼為

var vm = new Vue({
el: '#app',
data: {
number: 1
},
// 在模板中使用number這個資料
template: '<div id="app"><p>{{ number }} </p></div>',
beforeUpdate: function () {
console.log('呼叫了beforeUpdate鉤子函式')
},
updated: function () {
console.log('呼叫了updated鉤子函式')
}
})
 
vm.number = 2

見證奇蹟的時刻到了，噹噹噹

總之，只有Vue例項中的資料被“寫入”到我們的模板中，它的改變才可以被Vue追蹤，

重渲染從而呼叫 beforeUpdate鉤子函式和updated鉤子函式