這一篇來說說vue的生命周期,什么叫生命周期呢快集,就是從出生到毀滅的過程咯贡羔,也就是記錄運行軌跡的意思咯。
比如人從出生開始个初,到了4乖寒、5歲就要送到幼兒園去調(diào)教,因為這時候是最好學習能力的時候勃黍,vue也有對應的從創(chuàng)建到毀滅,一共有10個點晕讲,看看圖覆获,來點干澀的東西:
咦~~說好的10個呢?怎么打了八折瓢省,其實剩余兩個是:
actived和deactivated啦弄息,是在keep-alive組件被激活的時候調(diào)用,和keep-alive組件被停用的時候調(diào)用勤婚,因為涉及keep-alive的用法摹量,所以這里就不細說。
為了避免填鴨式學習(懶就是懶馒胆,有時候還是需要找個冠冕堂皇的理由)缨称,我這里只演示created和mounted這兩個生命周期,
——》created祝迂,是指當數(shù)據(jù)加載完畢時候,但是dom還沒有創(chuàng)建時候執(zhí)行的函數(shù),我們在開發(fā)過程中很多時候是需要和后臺交互的惫叛,我們可以在data里面設定一些默認值挤茄,但是更多時候我們其實是想當數(shù)據(jù)返回了時候再顯示出頁面山害,讓用戶看到的第一眼就是渲染好的頁面,而不是數(shù)據(jù)有變化沿量,然后頁面的數(shù)據(jù)從默認值到后臺獲取到的值浪慌,所以這時候我們一般把數(shù)據(jù)獲取的函數(shù)在此生命周期里面啟動:
——》mounted,是指dom加載完畢時候的執(zhí)行函數(shù)朴则,這時候的頁面是完整的权纤,特別是注意這時候的dom結(jié)構(gòu)已經(jīng)有了,對于喜歡操作dom的童鞋佛掖,這時候你就可以展開你的手腳妖碉,把dom揉捏成長短高圓胖瘦了;
好了芥被,來個代碼吧欧宜,文字永遠是干澀難懂的,一行代碼抵過千言萬語:
其中this.data是可以獲取到我們定義的那個data值的拴魄,然后this.$el是獲取組件的dom元素冗茸,在created階段是有數(shù)據(jù),但是還沒有渲染dom所以獲取時候是undefined的匹中,在mounted階段是已經(jīng)渲染dom結(jié)構(gòu)完畢時候執(zhí)行的函數(shù)夏漱,這樣是不是更明了了。其他的周期函數(shù)也是一樣的調(diào)用顶捷,只是在不同階段調(diào)用而已罷了挂绰,小伙伴在自己可愛的小電腦上可以點一點,完美服赎、安排葵蒂!
喜歡的朋友可以關注我,一起成長哦重虑!