面試過程中,經常被面試官問道,了解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節點。