13518219792
小編給大家分享一下vue.js中鉤子函數(shù)是什么，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！
vue.js中有八個鉤子函數(shù)，分別是：1、beforeCreate用于創(chuàng)建前；2、created用于創(chuàng)建后；3、beforeMount用于掛載前；4、mounted用于掛載后；5、beforeDestroy用于銷毀前。
vue.js中有八個鉤子函數(shù)，分別是：
一、beforeCreate:創(chuàng)建前
1、當(dāng)前vue實(shí)例化的時候會做一個初始化的操作，在這個生命周期函數(shù)里面我們可以做初始化的loading
2、在當(dāng)前函數(shù)里面是訪問不到data中的屬性，但是可以通過vue的實(shí)例對象進(jìn)行訪問
二、created:創(chuàng)建后
1、當(dāng)beforeCreate執(zhí)行完畢以后，會執(zhí)行created. 在當(dāng)前函數(shù)中我們可以訪問到data中的屬性
2、當(dāng)前生命周期函數(shù)執(zhí)行的時候會將data中所以的屬性和methods身上所以的方法添加到vue的實(shí)例身上，同時
會將data中所有的屬性添加一個getter/setter方法
3、如果需要進(jìn)行前后端上數(shù)據(jù)交互(ajax請求的時候) 需要在當(dāng)前生命周期中使用
三、beforeMount:掛載前
(渲染)
render函數(shù)初次被調(diào)用---->數(shù)據(jù)和模板沒有進(jìn)行相結(jié)合，同時還沒有渲染到html頁面上
可以在此做渲染前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一樣 值必須是的 訪問的時候我們可以通過this.$refs.屬性
五、beforeDestroy:銷毀前
銷毀之前還可以訪問到DOM結(jié)構(gòu) 以及相關(guān)的數(shù)據(jù)(data)
在這個生命周期函數(shù)中我們可以將綁定的事件進(jìn)行移除
六、destroyed:銷毀后
在這個生命周期函數(shù)中會將數(shù)據(jù)和模板之間的關(guān)系斷開(不是你的做的)
在這個生命周期函數(shù)中我們還是可以訪問到data中的屬性
但是訪問不到真實(shí)的DOM結(jié)構(gòu)了
七、beforeUpdate:更新前
只要data中的屬性發(fā)生了改變，那么這個生命周期就會執(zhí)行，render函數(shù)再次會執(zhí)行
在這個生命周期函數(shù)中我們可以對數(shù)據(jù)進(jìn)行最后的修改，同時也可以訪問到新的DOM結(jié)構(gòu)和數(shù)據(jù)
八、updated:更新后
在當(dāng)前生命周期函數(shù)中我們可以訪問到新的DOM結(jié)構(gòu)(數(shù)據(jù)更新后新的DOM結(jié)構(gòu))和數(shù)據(jù)
看完了這篇文章，相信你對vue.js中鉤子函數(shù)是什么有了一定的了解，想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！
