您好,登錄后才能下訂單哦!
小編給大家分享一下Vue生命周期函數(shù)有哪些,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
1.BeforeCreate()
Vue實(shí)例已經(jīng)創(chuàng)建,但是data,和methods中的數(shù)據(jù)和方法都未被初始化。就是說你可以在beforeCreated(){}中獲取到this,this指的是當(dāng)前的Vue實(shí)例或者組件,但是this.data,this.method都是獲取不到的。
2.Created()
Vue中data和method都已經(jīng)初始化好。一般在此鉤子函數(shù)中進(jìn)行數(shù)據(jù)的初始化。
在此階段后和BeforeMounte之前執(zhí)行了render函數(shù)。Vue將代碼渲染成內(nèi)存中的DOM,也就是虛擬DOM。尚未掛載到頁面中。
在此之后在beforeMount之前,Vue構(gòu)造函數(shù)會(huì)檢查配置項(xiàng)中有無el屬性。如果有則替換html文檔中的節(jié)點(diǎn)。再判斷是否指定了template選項(xiàng),如果有則將template替換節(jié)點(diǎn),如果沒有則依然是用el替換節(jié)點(diǎn)。
3.BeforeMount()
函數(shù)中,頁面中是沒有被虛擬dom替換之前的dom
打個(gè)栗子
let vm = new Vue({ el: '#app', data: { message: 'wxs', arr:[1,2,3], obj:{ name:'wxs', age:21 } }, beforeMount(){ console.log(document.querySelector("#app")) }, mounted(){ console.log(document.querySelector("#app")) }, methods:{ }, watch:{ }, template: `<p id="app"><p>{{message}}</p><p>{{arr[0]}}</p><p>{{obj.name}}</p><button>改變!</button></p>`, })
再看打印結(jié)果
4.Mounted()
頁面顯示的是已經(jīng)被替換之后的元素。
以上是Vue組件創(chuàng)建期間的鉤子函數(shù)
以下是組件運(yùn)行期間的鉤子函數(shù)。
5.beforeUpdate()
觸發(fā)此鉤子函數(shù)的方法就是data中的值發(fā)生改變。在此鉤子函數(shù)中還能拿到更新之前的值。
在此鉤子函數(shù)中,界面還沒有被更新,但是data值已經(jīng)更新。(總結(jié):舊頁面,新數(shù)據(jù))
在beforeupdate之后和update之前Vue在內(nèi)存中偷偷執(zhí)行了Virtual Dom的重新渲染和掛載。
6.update()
在此鉤子中能拿到新界面的值,和新的數(shù)據(jù)值。(總結(jié):新界面,新數(shù)據(jù))
測(cè)試代碼及截圖
let comp = { template: "<p><p>{{msg}}</p> <button ref='btn' @click='change'>改變了</button></p>", data() { return { msg: '初始文字' } }, methods: { change: function () { this.msg = '改變了' } }, beforeUpdate() { console.log(document.getElementById('app').innerHTML) }, updated(){ console.log(document.getElementById('app').innerHTML) } } let vm = new Vue({ el: '#app', data() { return {} }, components: { comp }, })
接下來就是銷毀階段
7.beforedestroy()
進(jìn)入到實(shí)例銷毀階段。實(shí)例中的所有數(shù)據(jù)和方法依舊可用。
8.destroyed()
函數(shù)實(shí)例已經(jīng)銷毀,所有數(shù)據(jù)和方法均不可用。
看完了這篇文章,相信你對(duì)“Vue生命周期函數(shù)有哪些”有了一定的了解,如果想了解更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。