Vue生命週期
正如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鉤子函式