淺談vue中的幾個重要的鈎子函數。


 生命周期  鈎子函數

        一個組件從創建到銷毀的過程就是生命周期。

        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結構

            4ref類似與id一樣 值必須是唯一的   訪問的時候我們可以通過this.$refs.屬性

        

        beforeDestroy:銷毀前

            銷毀之前還可以訪問到DOM結構  以及相關的數據(data)

            在這個生命周期函數中我們可以將綁定的事件進行移除

 

        destroyed:銷毀后

            在這個生命周期函數中會將數據和模板之間的關系斷開(不是你的做的)

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

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

 

        beforeUpdate:更新前

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

            在這個生命周期函數中我們可以對數據進行最后的修改,同時也可以訪問到最新的DOM結構和數據

 

        updated:更新后

            在當前生命周期函數中我們可以訪問到最新的DOM結構(數據更新后最新的DOM結構)和數據


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM