vue生命週期

執行階段

銷毀階段

小案例

元件的建立到銷毀的一系列過程叫做元件的生命週期。

[外鏈轉存失敗,源站可能有防盜煉機制,建議將儲存下來直接上傳(img-hrgwmjpp-1585113315704)(lifecycle-1585098160285.png)]

生命週期大致分為三個階段：初始化、執行中、銷毀

beforecreate

created

beforemount

mounted

元件通過new vue() 建立出來之後會初始化事件和生命週期後 立即執行

資料還沒有掛載到，無法訪問到資料和真實的dom

一般不做操作

beforecreate()

,

資料已被掛載，真實 dom 還沒被渲染出來，執行該函式

可以訪問到資料，無法訪問頁面中的真實 dom 元素

在這裡同步更改資料 不會觸發 執行中的 updated 函式

一般可以在這裡做初始資料的獲取。 做非同步ajax，繫結初始化事件

created()

,

找例項或者元件對應的模板，編譯模板為虛擬dom放入到 render 函式中準備渲染，然後執行該函式

用法大致與 created 一樣，可以做ajax與初始化事件的繫結操作

beforemount()

,

開始執行render函式渲染頁面，渲染出真實dom了，然後執行該函式

可以訪問到資料 和 頁面中的真實 dom 元素

可以用來做一些例項化的相關操作 ===> 拖拽

render()

mounted()

,

beforeupdate

updated

dom 掛載完畢了，然後再去當資料 發生變化 的時候，立即執行該函式

該函式執行後，會進行重新構建虛擬 dom，通過 diff 演算法與上一次虛擬 dom 進行比較後重新渲染

一般不做什麼事兒

資料更新完畢，dom也重新 render 完成，執行該函式

可以操作更新後的dom

beforedestroy

destroyed

呼叫 $destroy 方法後，立即執行該函式

一般做一些善後工作，例如清除計時器、清除非指令繫結的事件等等

銷毀完畢，只剩下dom空殼，沒有任何事件的繫結與資料的雙向繫結，所有的子例項也都被銷毀

做善後工作也可以

本案例引用 vue框架、swiper外掛程式、vue-resource外掛程式實現

rel=

"stylesheet"
href
="../base/swiper.min.css"
/>
src=
"../base/swiper.min.js"
>
script
>
src=
"../base/vue.js"
>
script
>
src=
"">
script
>

>

>
my-banner
>
div>
"my-banner"
>
class
="swiper-container"
>
class
=>
class
="swiper-slide"
v-for
="banner in banners"
:key
="banner.id"
>
width
="100%"
:src
="banner.image"
alt="
" />
div>
div>
div>

vue.

component
("my-banner",;
},created()
});}
);}}
);newvue()
;

原因是什麼呢？

結合之前講過的生命週期鉤子函式，豁然開朗，created函式只是掛載資料的，真實的 dom 並沒有被渲染出來，所以自然就初始化失敗了

那麼將初始化函式放到 mounted 函式裡面可以嗎？答案是否定的，因為傳送請求是非同步操作，所以一開始資料為空的時候直接就執行到 mounted 函式，直接開始初始化，之然會失敗

所以我們應該將初始化函式放到 updated 函式中，

這樣，當請求資料回來的時候，會改變原資料，修改完成，並且與上一次虛擬 dom 進行對比，更新渲染到檢視完成後，就會觸發 updated 函式，

這時，再進行 swiper 的例項化/初始化就沒問題了。

vue.

component
("my-banner",;
},created()
);},
updated()
});}
});new
vue(
);

以上就是本人的學習總結，如有不對，歡迎指出~

vue生命週期

beforecreate 元件例項剛剛被建立，屬性都沒有 create 例項已經建立完成，屬性已經繫結 beforemount 模板編譯之前 mounted 模板編譯之後 beforeupdate 元件更新之前 updated 元件更新完畢 beforedestroy 元件銷毀之前 destroye...

vue生命週期

vue把整個生命週期劃分為建立 掛載 更新 銷毀等階段，每個階段都會給一些 鉤子 讓我們來做一些我們想實現的動作。學習例項的生命週期，能幫助我們理解vue例項的運作機制，更好地合理利用各個鉤子來完成我們的業務 我們分別來看看這幾個階段 1.beforecreate 此階段為例項初始化之後，此時的資料...

Vue 生命週期

import vue from vue el root 沒有的話,使用render,繼續沒有,就把el的outerhtml編譯成模板 template temp data beforecreate created el是原來的el beforemount 渲染函式 render h this.tex...