VUE的生命週期

官方文檔：https://vuejs.bootcss.com/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA

生命週期勾子就相似於人的出生，成長，死亡。

一：基本概念

出生 ---> 上幼兒園 ---> 上學 ---> 工做  ---> 讀研 ---> 過上幸福的生活 ---> 結婚 ---> 生娃 ---> 美滿生活 ---> goodbye

 

二：Vue實例的生命週期注意事項

1、生命週期鉤子是Vue框架幫咱們定義好的

2、咱們的生命週期鉤子，只有在咱們Vue對象中，實現了他纔會調用，沒有實現他就不會調用

三、beforeCreate、created、beforeMount、mounted、beforeDestory，destoryed只會被調用一次

 

三：生命週期函數調用的順序

圖:https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA

 

beforeCreate
created
beforeMount
mounted   //在這裏能夠操縱dom,可能須要加點延時

beforeUpdate

updated beforeDestory destoryed

 

 beforeCreate【Vue對象被建立出來以前】 -> created【Vue對象被建立出來了】->beforeMount【組件中的template內容被顯示在瀏覽器以前】->mounted【組件的template的內容被顯示在瀏覽器中了】->beforeUpdate【數據變化以後，從新渲染以前】->updated【已經從新渲染完成了】->beforeDestory【組件被銷燬以前】->destoryed【組件被銷燬了】

 

四：生命週期鉤子的應用場景

created:發送網絡請求
mounted:操做dom
updated:若是頁面上有些地方的顯示，是要根據新的數據來，把操做dom的代碼放在裏面

收集用戶偏好（好比用戶更喜歡那個組件呢?）
beforeCreate 進入時間
beforeDestory 結束時間

下次接着瀏覽
beforeDestory 記錄上次閱讀時候的偏移量(Y值)
mounted:滾動到上次瀏覽的位置

悄悄記錄用戶填寫的信息
beforeDestory 記錄用戶填寫了，可是未提交的信息
mounted:把上次填寫過的信息，自動填充

 

 本身：

vue生命週期函數應用場景

created

 若是在mouted方法中就有可能頁面出現空白

updated：當數據變化時，調用

加油啦

 我我的以爲生命週期很是重要，大家以爲呢？