vue的生命周期(面試所需,解決面試官的提問)


面試過程中,經常被面試官問道,了解vue的生命周期嗎?簡單說一下?

回答:一共十個常用的有八個,分別是beforeCreate ,created ,beforeMount,mounted ,beforeUpdate ,updated ,beforeDestroy ,destroyed...(說的確實很簡單)

面試官想聽到是這種答案嗎,顯然並不是。

vue的生命周期分為四個過程===》創建過程(beforeCreate ,created),掛載過程(beforeMount,mounted),更新過程(beforeUpdate ,updated),銷毀過程(beforeDestroy ,destroyed)

 

befoCreate(創建前)

當前生命周期el與data尚未初始化還不能訪問data、computed、watch、methods上的方法和數據

可以在這加個loading加載事件,在加載實例時觸發
created(創建后-常用) 當前生命周期data初始化完成,可以訪問到data、computed、watch、methods上的方法和數據,el初始化還沒完成所以還不能訪問 初始化完成時的事件寫在這里,在這里結束loading加載事件,可以做前后端的交互, 例:異步請求如ajax
beforeMount(掛載前)  當前生命周期在掛載開始之前被調用 掛載元素,獲取到DOM節點
mounted(掛載后)  當前生命周期el已經掛載到文檔里  可以操作DOM節點
beforeUpdate(更新前-多次)  當前生命周期在數據更新的時候就會執行 更新的數據和模板還沒結合,可以在當前生命周期做一個數據的最后修改
updated(更新后-多次)  當前生命周期更新的數據與模板結合完畢 可以做一個確認停止事件的確認框
beforeDestroy(銷毀前-常用)  實例銷毀之前調用。  當前生命周期做一些移除的操作。例:監聽的移除,定時器的移除,事件的解綁
destroyed(銷毀后)  當前生命周期數據與視圖之間的關系將會斷開。  

 

實例:

 輸出()數據更新前

 

 

數據更新后(改變輸入框里的值)調用beforeUpdate()與updated()

 有圖有真相,看明白官網提供的圖,你就明白了。

這樣回答之后,面試官覺得還行,繼續提問,那么你再說一下在項目中父子組件之間的生命周期的順序?

 

 

 

 如圖所示:父子組件的生命周期中,首先走父組件的生命周期,當父組件的生命周期走完beforeMount(掛在前)這個函數時就會走子組件的生命周期,當子組件掛載完成后(執行完mounted)父組件在掛載dom節點。


免責聲明!

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



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