Vue的生命週期

2021-10-16 17:07:24 字數 1005 閱讀 6533

乙個元件從開始到最後消亡所經歷的各種狀態,就是乙個元件的生命週期

說明:在例項初始化之後,資料觀測 (data observer) 和 event/watcher 事件配置之前被呼叫。

注意:此時dom沒有渲染,無法獲取 data中的資料、methods中的方法。但是$route已存在,可以根據路由資訊進行重定向等操作。

說明:這是乙個常用的生命週期,可以訪問data,使用watcher、events、methods,也就是說 資料觀測(data observer) 和event/watcher 事件配置 已完成。該階段允許執行http請求操作,但dom沒有渲染。

此時,vue例項已經掛載到頁面中,可以獲取到el中的dom元素,執行render函式生成虛擬dom,建立真實dom替換虛擬dom,並掛載到例項。可以操作dom,比如事件監聽。

vm.data更新之後,虛擬dom重新渲染之前被呼叫。在這個鉤子函式中可以修改vm.data,這不會觸發附加的重渲染過程。

元件 dom 已經更新,所以你現在可以執行依賴於 dom 的操作,虛擬dom重新渲染後呼叫,若再次修改$vm.data,會再次觸發beforeupdate、updated,進入死迴圈。

vue例項被銷毀前呼叫,也就是說在這個階段還是可以呼叫例項的。使用場景比如:例項銷毀之前,執行清理任務,比如:清除定時器等

vue 例項銷毀後呼叫。呼叫後,vue 例項指示的所有東西都會解繫結,所有的事件***會被移除,所有的子例項也會被銷毀。

一般在,created,mounted 中都可以傳送資料請求,但是,大部分時候,會在created傳送請求。如果希望頁面首次渲染的資料來自後端,可以把請求放在created中,因為此時data已經掛在到vue例項了。

優點,第一點:能更快獲取到服務端資料,減少頁面載入時間;

第二點:放在 created 中有助於一致性,因為ssr 不支援 beforemount 、mounted 鉤子函式。

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