小編給大家分享一下vue.js中鉤子函數(shù)是什么,希望大家閱讀完這篇文章后大所收獲,下面讓我們一起去探討吧!
成都做網(wǎng)站、成都網(wǎng)站制作、成都外貿(mào)網(wǎng)站建設(shè),成都做網(wǎng)站公司-創(chuàng)新互聯(lián)已向上千多家企業(yè)提供了,網(wǎng)站設(shè)計(jì),網(wǎng)站制作,網(wǎng)絡(luò)營(yíng)銷等服務(wù)!設(shè)計(jì)與技術(shù)結(jié)合,多年網(wǎng)站推廣經(jīng)驗(yàn),合理的價(jià)格為您打造企業(yè)品質(zhì)網(wǎng)站。vue.js中有八個(gè)鉤子函數(shù),分別是:1、beforeCreate用于創(chuàng)建前;2、created用于創(chuàng)建后;3、beforeMount用于掛載前;4、mounted用于掛載后;5、beforeDestroy用于銷毀前。
vue.js中有八個(gè)鉤子函數(shù),分別是:
一、beforeCreate:創(chuàng)建前
1、當(dāng)前vue實(shí)例化的時(shí)候會(huì)做一個(gè)初始化的操作,在這個(gè)生命周期函數(shù)里面我們可以做初始化的loading
2、在當(dāng)前函數(shù)里面是訪問不到data中的屬性,但是可以通過vue的實(shí)例對(duì)象進(jìn)行訪問
二、created:創(chuàng)建后
1、當(dāng)beforeCreate執(zhí)行完畢以后,會(huì)執(zhí)行created. 在當(dāng)前函數(shù)中我們可以訪問到data中的屬性
2、當(dāng)前生命周期函數(shù)執(zhí)行的時(shí)候會(huì)將data中所以的屬性和methods身上所以的方法添加到vue的實(shí)例身上,同時(shí)
會(huì)將data中所有的屬性添加一個(gè)getter/setter方法
3、如果需要進(jìn)行前后端上數(shù)據(jù)交互(ajax請(qǐng)求的時(shí)候) 需要在當(dāng)前生命周期中使用
三、beforeMount:掛載前
(渲染)
render函數(shù)初次被調(diào)用---->數(shù)據(jù)和模板沒有進(jìn)行相結(jié)合,同時(shí)還沒有渲染到html頁(yè)面上
可以在此做渲染前data中數(shù)據(jù)最后的修改
四、mounted:掛載后
1、數(shù)據(jù)和模板進(jìn)行相結(jié)合,渲染成真實(shí)的DOM結(jié)構(gòu)
2、在當(dāng)前生命周期函數(shù)里面我們可以訪問到真實(shí)的DOM結(jié)構(gòu),
3、在vue中我們可以通過$refs來訪問到真實(shí)的DOM結(jié)構(gòu)
4、ref類似與id一樣 值必須是的 訪問的時(shí)候我們可以通過this.$refs.屬性
五、beforeDestroy:銷毀前
銷毀之前還可以訪問到DOM結(jié)構(gòu) 以及相關(guān)的數(shù)據(jù)(data)
在這個(gè)生命周期函數(shù)中我們可以將綁定的事件進(jìn)行移除
六、destroyed:銷毀后
在這個(gè)生命周期函數(shù)中會(huì)將數(shù)據(jù)和模板之間的關(guān)系斷開(不是你的做的)
在這個(gè)生命周期函數(shù)中我們還是可以訪問到data中的屬性
但是訪問不到真實(shí)的DOM結(jié)構(gòu)了
七、beforeUpdate:更新前
只要data中的屬性發(fā)生了改變,那么這個(gè)生命周期就會(huì)執(zhí)行,render函數(shù)再次會(huì)執(zhí)行
在這個(gè)生命周期函數(shù)中我們可以對(duì)數(shù)據(jù)進(jìn)行最后的修改,同時(shí)也可以訪問到新的DOM結(jié)構(gòu)和數(shù)據(jù)
八、updated:更新后
在當(dāng)前生命周期函數(shù)中我們可以訪問到新的DOM結(jié)構(gòu)(數(shù)據(jù)更新后新的DOM結(jié)構(gòu))和數(shù)據(jù)
看完了這篇文章,相信你對(duì)vue.js中鉤子函數(shù)是什么有了一定的了解,想了解更多相關(guān)知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝各位的閱讀!