VUE的生命週期

2021-10-24 12:54:15 字數 592 閱讀 8460

共有八個基本鉤子函式

觸發的行為:vue例項的掛載元素$el和資料物件data都為undefined,還未初始化。

在此階段可以做的事情:加loading事件

觸發的行為:vue例項的資料物件data有了,$el還沒有

在此階段可以做的事情:解決loading,請求ajax資料為mounted渲染做準備

觸發的行為:vue例項的$el和data都初始化了,但還是虛擬的dom節點,具體的data.filter還未替換

在此階段可以做的事情:。。。

觸發的行為:vue例項掛載完成,data.filter成功渲染

在此階段可以做的事情:配合路由鉤子使用

觸發的行為:data更新時觸發

在此階段可以做的事情:。。。

觸發的行為:data更新時觸發

在此階段可以做的事情:資料更新時,做一些處理(此處也可以用watch進行觀測)

觸發的行為:元件銷毀時觸發

在此階段可以做的事情:可向使用者詢問是否銷毀

觸發的行為:元件銷毀時觸發,vue例項解除了事件監聽以及和dom的繫結(無響應了),但dom節點依舊存在

在此階段可以做的事情:元件銷毀時進行提示

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...