小編給大家分享一下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、當前vue實例化的時候會做一個初始化的操作,在這個生命周期函數(shù)里面我們可以做初始化的loading
2、在當前函數(shù)里面是訪問不到data中的屬性,但是可以通過vue的實例對象進行訪問
二、created:創(chuàng)建后
1、當beforeCreate執(zhí)行完畢以后,會執(zhí)行created. 在當前函數(shù)中我們可以訪問到data中的屬性
2、當前生命周期函數(shù)執(zhí)行的時候會將data中所以的屬性和methods身上所以的方法添加到vue的實例身上,同時
會將data中所有的屬性添加一個getter/setter方法
3、如果需要進行前后端上數(shù)據(jù)交互(ajax請求的時候) 需要在當前生命周期中使用
三、beforeMount:掛載前
(渲染)
render函數(shù)初次被調(diào)用---->數(shù)據(jù)和模板沒有進行相結(jié)合,同時還沒有渲染到html頁面上
可以在此做渲染前data中數(shù)據(jù)最后的修改
四、mounted:掛載后
1、數(shù)據(jù)和模板進行相結(jié)合,渲染成真實的DOM結(jié)構(gòu)
2、在當前生命周期函數(shù)里面我們可以訪問到真實的DOM結(jié)構(gòu),
3、在vue中我們可以通過$refs來訪問到真實的DOM結(jié)構(gòu)
4、ref類似與id一樣 值必須是的 訪問的時候我們可以通過this.$refs.屬性
五、beforeDestroy:銷毀前
銷毀之前還可以訪問到DOM結(jié)構(gòu) 以及相關(guān)的數(shù)據(jù)(data)
在這個生命周期函數(shù)中我們可以將綁定的事件進行移除
六、destroyed:銷毀后
在這個生命周期函數(shù)中會將數(shù)據(jù)和模板之間的關(guān)系斷開(不是你的做的)
在這個生命周期函數(shù)中我們還是可以訪問到data中的屬性
但是訪問不到真實的DOM結(jié)構(gòu)了
七、beforeUpdate:更新前
只要data中的屬性發(fā)生了改變,那么這個生命周期就會執(zhí)行,render函數(shù)再次會執(zhí)行
在這個生命周期函數(shù)中我們可以對數(shù)據(jù)進行最后的修改,同時也可以訪問到新的DOM結(jié)構(gòu)和數(shù)據(jù)
八、updated:更新后
在當前生命周期函數(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è)資訊頻道,感謝各位的閱讀!
新聞標題:vue.js中鉤子函數(shù)是什么-創(chuàng)新互聯(lián)
網(wǎng)址分享:http://jinyejixie.com/article8/djscip.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供自適應(yīng)網(wǎng)站、網(wǎng)站營銷、定制網(wǎng)站、App開發(fā)、ChatGPT、移動網(wǎng)站建設(shè)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容