Vue生命周期四個階段


什么是生命周期:

從Vue實例創建、運行、到銷毀期間,總是伴隨着各種各樣的事件,這些事件,統稱為生命周期!

生命周期鈎子:就是生命周期事件的別名而已;

生命周期鈎子 = 生命周期函數 = 生命周期事件

意義:

給了用戶在不同階段添加自己的代碼的機會。

初始化 (create)--- 組件掛載(mount)-----組件更新 (update)--- 銷毀(destroy)

 

生命周期 發生了什么
beforeCreate 初始化界面前 : 在當前階段data、methods、computed以及watch上的數據和方法都不能被訪問
created 初始化界面后 : 在實例創建完成后發生,當前階段已經完成了數據觀測,也就是可以使用數據,更改數據,在這里更改數據不會觸發updated函數,也就是不會更新視圖,SSR可以放這里。
beforeMount 掛載前 :完成模板編譯,虛擬Dom已經創建完成,即將開始渲染。在此時也可以對數據進行更改,不會觸發updated
mounted 掛載完成 : 將編譯好的模板掛載到頁面 (虛擬DOM掛載) ,可以在這進行異步請求以及DOM節點的訪問,在vue用$ref操作
beforeUpdate 更新數據前 : 組件數據更新之前調用,數據都是新的,頁面上數據都是舊的 組件即將更新,准備渲染頁面 , 可以在當前階段進行更改數據,不會造成重渲染
updated 組件更新后 : render重新渲染 , 此時數據和界面都是新的 ,要注意的是避免在此期間更改數據,因為這可能會導致無限循環的更新
beforeDestroy   組件卸載前 : 實例銷毀之前,在當前階段實例完全可以被使用,我們可以在這時進行善后收尾工作,比如清除計時器
destroyed 組件卸載后 : 組件已被拆解,數據綁定被卸除,監聽被移出,子實例也統統被銷毀。
activited keep-alive 專屬 , 組件被激活時調用
deactivated keep-alive 專屬 , 組件被銷毀時調用

 

 

初次渲染就會觸發的生命周期

  • beforeCreate() , created()
  • beforeMount() , mounted()

 

 


免責聲明!

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



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