|
最近一直在學習Vue，而vue生命周期是我們不可能繞開的一個很核心的知識點，今天來簡單的梳理一下大概的內(nèi)容。 一、鉤子函數(shù)在一開始學習的時候，總有鉤子函數(shù)這個名詞冒出來，而且在vue官網(wǎng)文檔中也頻繁出現(xiàn)，也相信給很多初學者帶來了困擾。那到底什么是鉤子函數(shù)呢？ 按我個人的理解，鉤子函數(shù)就是一個函數(shù)，就是在vue實例在某個時間點自動執(zhí)行的函數(shù)。鉤子函數(shù)鉤子函數(shù)，就是掛載一些東西的，我們把需要實現(xiàn)的一些功能代碼寫在對應的鉤子函數(shù)中，當生命周期在執(zhí)行的時候，就能執(zhí)行我們掛載的代碼。 鉤子函數(shù)的實現(xiàn)，基本原理就是callback，回調(diào)函數(shù)。 二、vue生命周期圖示（注釋）原圖是從vuejs官方文檔上拷下來的，自己用ps寫了一點注釋。 三、vue生命周期詳細解析1. 實例化vue(組件)對象：new Vue()2. 初始化事件和生命周期 init events 和 init lifecycle3. beforeCreate函數(shù)：在實例初始化之后，數(shù)據(jù)觀測 (data observer) 和 event/watcher 事件配置之前被調(diào)用。 即此時vue（組件）對象被創(chuàng)建了，但是vue對象的屬性還沒有綁定，如data屬性，computed屬性還沒有綁定，即沒有值。此時還沒有數(shù)據(jù)和真實DOM。屬性還沒有賦值，也沒有動態(tài)創(chuàng)建template屬性對應的HTML元素（二階段的createUI函數(shù)還沒有執(zhí)行） 4. 掛載數(shù)據(jù)（屬性賦值）包括 屬性和computed的運算，通過依賴注入導入依賴 5. Created函數(shù)：此時vue對象的屬性有值了，但是DOM還沒有生成，$el屬性還不存在。 即：data，computed都執(zhí)行了。屬性已經(jīng)賦值，但沒有動態(tài)創(chuàng)建template屬性對應的HTML元素，所以，此時如果更改數(shù)據(jù)不會觸發(fā)updated函數(shù) 如果：數(shù)據(jù)的初始值就來自于后端，可以發(fā)送ajax，或者fetch請求獲取數(shù)據(jù)，但是，此時不會觸發(fā)updated函數(shù) 6. 檢查1）檢查是否有el屬性 完成了全局變量$el的綁定。 2）檢查是否有template屬性 檢查配置中的template項，如果沒有template進行填充被綁定區(qū)域，則被綁定區(qū)域的el對象的outerHTML（即整個#app DOM對象，包括< div id=”app” >和< /div>標簽）都作為被填充對象替換掉填充區(qū)域 即：如果vue對象中有 template屬性，那么，template后面的HTML會替換$el對應的內(nèi)容。如果有render屬性（渲染），那么render就會替換template。 即：優(yōu)先關系時： render > template > el 7. beforeMount函數(shù)：模板編譯(template)、數(shù)據(jù)掛載(把數(shù)據(jù)顯示在模板里)之前執(zhí)行的鉤子函數(shù) 此時 this.$el有值，但是數(shù)據(jù)還沒有掛載到頁面上。即此時頁面中的{{}}里的變量還沒有被數(shù)據(jù)替換 8. 模板編譯：用vue對象的數(shù)據(jù)（屬性）替換模板中的內(nèi)容9. Mounted函數(shù)：模板編譯完成，數(shù)據(jù)掛載完畢 即：此時已經(jīng)把數(shù)據(jù)掛載到了頁面上，所以，頁面上能夠看到正確的數(shù)據(jù)了。 一般來說，我們在此處發(fā)送異步請求（ajax，fetch，axios等），獲取服務器上的數(shù)據(jù)，顯示在DOM里。 10. beforeUpdate函數(shù)：組件更新之前執(zhí)行的函數(shù)，只有數(shù)據(jù)更新后，才能調(diào)用（觸發(fā)）beforeUpdate，注意：此數(shù)據(jù)一定是在模板上出現(xiàn)的數(shù)據(jù)，否則，不會，也沒有必要觸發(fā)組件更新（因為數(shù)據(jù)不出現(xiàn)在模板里，就沒有必要再次渲染） 數(shù)據(jù)更新了，但是，vue（組件）對象對應的dom中的內(nèi)部（innerHTML）沒有變，所以叫作組件更新前。（數(shù)據(jù)更了，模板沒更新） 11. updated函數(shù)：組件更新之后執(zhí)行的函數(shù) vue（組件）對象對應的dom中的內(nèi)部（innerHTML）改變了，所以，叫作組件更新之后 12. beforeDestroy：vue（組件）對象銷毀之前13. destroyed：vue組件銷毀后 |
|
|
