Vue例項生命週期

2022-09-15 22:42:21 字數 2017 閱讀 1110

vue例項在建立時有一系列的初始化步驟,例如建立資料觀察,編譯模板,建立資料繫結等。在此過程中,我們可以通過一些定義好的生命週期鉤子函式來執行業務邏輯。本文將詳細介紹vue例項的生命週期

下圖是vue例項生命週期的圖示

接下來,根據提供的生命週期鉤子,對vue例項各個階段的情況進行詳細說明

【beforecreate】

在例項開始初始化時同步呼叫。此時資料觀測、事件等都尚未初始化

【created】

在例項建立之後呼叫。此時已完成資料觀測、事件方法,但尚未開始dom編譯,即未掛載到document中

【beforemount】

在mounted之前執行

【mounted】

在編譯結束時呼叫。此時所有指令已生效,資料變化已能觸發dom更新,但不保證$el已插入文件  

【beforeupdate】

在例項掛載之後,再次更新例項(例如更新 data)時會呼叫該方法,此時尚未更新dom結構

【updated】

在例項掛載之後,再次更新例項並更新完dom結構後呼叫

【beforedestroy】

在開始銷毀例項時呼叫,此刻例項仍然有效

【destroyed】

在例項被銷毀之後呼叫。此時所有繫結和例項指令都已經解綁,子例項也被銷毀

【activated】

需要配合動態元件keep-live屬性使用。在動態元件初始化渲染的過程中呼叫該方法

【deactivated】

需要配合動態元件keep-live屬性使用。在動態元件初始化移出的過程中呼叫該方法

下面寫乙個簡單例項來更清楚地了解vue例項內部的執行機制

vue例項在建立時有一系列的初始化步驟,例如建立資料觀察,編譯模板,建立資料繫結等。在此過程中,我們可以通過一些定義好的生命週期鉤子函式來執行業務邏輯。本文將詳細介紹vue例項的生命週期

下圖是vue例項生命週期的圖示

接下來,根據提供的生命週期鉤子,對vue例項各個階段的情況進行詳細說明

【beforecreate】

在例項開始初始化時同步呼叫。此時資料觀測、事件等都尚未初始化

【created】

在例項建立之後呼叫。此時已完成資料觀測、事件方法,但尚未開始dom編譯,即未掛載到document中

【beforemount】

在mounted之前執行

【mounted】

在編譯結束時呼叫。此時所有指令已生效,資料變化已能觸發dom更新,但不保證$el已插入文件  

【beforeupdate】

在例項掛載之後,再次更新例項(例如更新 data)時會呼叫該方法,此時尚未更新dom結構

【updated】

在例項掛載之後,再次更新例項並更新完dom結構後呼叫

【beforedestroy】

在開始銷毀例項時呼叫,此刻例項仍然有效

【destroyed】

在例項被銷毀之後呼叫。此時所有繫結和例項指令都已經解綁,子例項也被銷毀

【activated】

需要配合動態元件keep-live屬性使用。在動態元件初始化渲染的過程中呼叫該方法

【deactivated】

需要配合動態元件keep-live屬性使用。在動態元件初始化移出的過程中呼叫該方法

下面寫乙個簡單例項來更清楚地了解vue例項內部的執行機制

vue例項生命週期

每個 vue 例項在被建立之前都要經過一系列的初始化過程。例如需要設定資料監聽 編譯模板 掛載例項到 dom 在資料變化時更新 dom 等。同時在這個過程中也會執行一些叫做生命週期鉤子的函式,給予使用者機會在一些特定的場景下新增他們自己的 beforecreate 在例項初始化之後,資料觀測和事件配...

Vue 例項的生命週期

在vue中,每個例項都有自己的乙個完整的生命週期,包括開始建立 初始化資料 編譯模板 將例項掛載到dom 渲染 更新 渲染 解除安裝等一系列過程。同時在這個過程中也會執行一些叫做生命週期鉤子的函式,這樣我們就可以在例項生命週期的不同階段做一些需要做的事情。這裡可能會有個小疑惑,怎麼突然又說是vue例...

vue例項的生命週期

是一套用於構建使用者介面的漸進式框架。與其他框架不同的是,vue被設計為可以自底向上的逐層應用。vue 的核心庫只關注檢視層,不僅易於上手,還便於與第三方庫或既有專案整合。另一方面,當與現代化的工具鏈以及各種支援類庫結合使用時,vue 也完全能夠為複雜的單頁應用提供驅動。宣告式渲染 vue.js的核...