vuejs2 0的生命週期解讀

2022-07-12 11:57:10 字數 3705 閱讀 4037

每個 vue 例項在被建立之前都要經過一系列的初始化過程。例如,例項需要配置資料觀測(data observer)、編譯模版、掛載例項到 dom ,然後在資料變化時更新 dom 。下圖展示的就是乙個vue例項物件的生命週期

從圖上我們可以看到vue在生命週期中有這些狀態,beforecreate,created,beforemount,mounted,beforeupdate,updated,beforedestroy,destroyed。vue在例項化的過程中,會呼叫這些生命週期的鉤子,給我們提供了執行自定義邏輯的機會。那麼,在這些vue鉤子中,vue例項到底執行了那些操作,我們先看下面執行的例子

我們可以看到,vue物件初始化過程中,會執行到beforecreate,created,beforemount,mounted這幾個鉤子的內容

beforecreate:資料還沒有監聽,沒有繫結到vue物件例項,同時也沒有掛載物件

created:資料已經繫結到了物件例項,但是還沒有掛載物件

beforemount: 模板已經編譯好了,根據資料和模板已經生成了對應的元素物件,將資料物件關聯到了物件的 $el屬性,$el屬性是乙個htmlelement物件,也就是這個階段,vue例項通過原生的createelement等方法來建立這個html片段,準備注入到我們vue例項指明的el屬性所對應的掛載點

mounted:將$el的內容掛載到了el,相當於我們在jquery執行了$(el).html($el),生成頁面上真正的dom,上面我們就會發現dom的元素和我們$el的元素是一致的。在此之後,我們能夠用方法來獲取到el元素下的dom物件,並進 行各種操作

當我們的data發生改變時,會呼叫beforeupdate和updated方法

beforeupdate:資料更新到dom之前,我們可以看到$el物件已經修改,但是我們頁面上dom的資料還沒有發生改變

updated: dom結構會通過虛擬dom的原則,找到需要更新頁面dom結構的最小路徑,將改變更新到dom上面,完成更新

例項的銷毀

beforedestroy,destroed:例項的銷毀,vue例項還是存在的,只是解綁了事件的監聽還有watcher物件資料與view的繫結,即資料驅動

每個 vue 例項在被建立之前都要經過一系列的初始化過程。例如,例項需要配置資料觀測(data observer)、編譯模版、掛載例項到 dom ,然後在資料變化時更新 dom 。下圖展示的就是乙個vue例項物件的生命週期

從圖上我們可以看到vue在生命週期中有這些狀態,beforecreate,created,beforemount,mounted,beforeupdate,updated,beforedestroy,destroyed。vue在例項化的過程中,會呼叫這些生命週期的鉤子,給我們提供了執行自定義邏輯的機會。那麼,在這些vue鉤子中,vue例項到底執行了那些操作,我們先看下面執行的例子

我們可以看到,vue物件初始化過程中,會執行到beforecreate,created,beforemount,mounted這幾個鉤子的內容

beforecreate:資料還沒有監聽,沒有繫結到vue物件例項,同時也沒有掛載物件

created:資料已經繫結到了物件例項,但是還沒有掛載物件

beforemount: 模板已經編譯好了,根據資料和模板已經生成了對應的元素物件,將資料物件關聯到了物件的 $el屬性,$el屬性是乙個htmlelement物件,也就是這個階段,vue例項通過原生的createelement等方法來建立這個html片段,準備注入到我們vue例項指明的el屬性所對應的掛載點

mounted:將$el的內容掛載到了el,相當於我們在jquery執行了$(el).html($el),生成頁面上真正的dom,上面我們就會發現dom的元素和我們$el的元素是一致的。在此之後,我們能夠用方法來獲取到el元素下的dom物件,並進 行各種操作

當我們的data發生改變時,會呼叫beforeupdate和updated方法

beforeupdate:資料更新到dom之前,我們可以看到$el物件已經修改,但是我們頁面上dom的資料還沒有發生改變

updated: dom結構會通過虛擬dom的原則,找到需要更新頁面dom結構的最小路徑,將改變更新到dom上面,完成更新

例項的銷毀

beforedestroy,destroed:例項的銷毀,vue例項還是存在的,只是解綁了事件的監聽還有watcher物件資料與view的繫結,即資料驅動

actived生命週期 Vuejs 生命週期

每個 vue 例項在被建立時都要經過一系列的初始化過程。如需要設定資料監聽 編譯模板 將例項掛載到 dom 並在資料變化時更新 dom 等。同時在這個過程中也會執行一些叫做生命週期鉤子的函式,這給了使用者在不同階段新增自己的 的機會。乙個 vue 例項 我們建立乙個 vue 例項,並在每個階段驗證 ...

Vue js 的生命週期詳解

vue 例項有乙個完整的生命週期,也就是從開始建立 初始化資料 編譯模板 掛載dom 渲染 更新 渲染 解除安裝等一系列 過程,我們稱這是 vue 的生命週期。通俗說就是 vue 例項從建立到銷毀的過程,就是生命週期。在vue的整個生命週期中,它提供了一些生命週期鉤子,給了我們執行自定義邏輯的機會。...

vue2 0生命週期解讀

首先看下官方概念解釋 1.beforecreate 建立前的狀態 建立例項前,vue例項的屬性值為undefined 2.created 例項建立完成後 data被定義了,但el屬性為undefined 然而,掛載階段還沒開始,el屬性目前不可見。3.beforemount 掛鉤前 dom渲染前 e...