首頁 >web前端 >js教程 >vue.js中有多少鉤子函數

vue.js中有多少鉤子函數

coldplay.xixi
coldplay.xixi原創
2020-11-24 09:44:076052瀏覽

vue.js中有八個鉤子函數,分別是:1、beforeCreate用於建立前;2、created用於建立後;3、beforeMount用於掛載前;4、mounted用於掛載後;5、beforeDestroy用於銷毀前。

vue.js中有多少鉤子函數

本教學操作環境:windows7系統、Vue2.9.6版,此方法適用於所有品牌電腦。

vue.js中有八個鉤子函數,分別是:

一、beforeCreate:建立前

            1、目前vue實例化的時候會做一個初始化的操作,在這個生命週期函數裡面我們可以做初始化的loading

            2、在目前函數裡面是存取不到data中的屬性,但是可以透過vue的實例物件進行存取

二、created:創建後

            1、當beforeCreate執行完畢以後,會執行created. 在目前函數中我們可以存取data中的屬性

         2、 當前生命週期函數執行的時候會將data中所以的屬性和methods身上所以的方法加入vue的實例身上,同時

            將data中所有的屬性加上一個getter/setter方法

            3、如果需要進行前後端上資料互動(ajax請求的時候) 需要在當前生命週期中使用

三、beforeMount:掛載前

     #    渲染 (#  

#            render函數初次被呼叫---->資料和範本沒有結合,同時也沒有渲染到html頁面上

            可以在此做渲染前data中資料最後的修改

四、mounted:掛載後

            1、資料和範本結合,渲染成真實的DOM結構

#            2、在目前目前為止函數到真實的DOM結構,

            3、vue中我們可以透過$refs來存取到真實的DOM結構

            4、ref我們可以透過this.$refs.屬性

五、beforeDestroy:銷毀前

            銷毀之前也可以存取DOM結構  以及相關的資料(data)#   #        生命週期函數中我們可以移除綁定的事件

六、destroyed:銷毀後

            在這個生命週期函數中會中斷資料與範本之間的關係(不是你的做的)

            在這個生命週期函數中我們還是可以訪問到data中的屬性

            但是訪問了一個不到真實的DOM結構到

##4七、 beforeUpdate:更新前

            只要data中的屬性發生了改變,那麼這個生命週期就會執行,render函數再次會執行

#            在這個生命週期函數中我們可以對資料進行最後的修改,同時也可以存取到最新的DOM結構和資料

八、updated:更新後

            在目前生命週期函數中我們可以存取到最新的DOM結構(資料更新後最新的DOM結構)和資料

相關學習推薦:###javascript影片教學#########

以上是vue.js中有多少鉤子函數的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn