Vue2 詳解生命週期

2021-08-27 23:53:09 字數 799 閱讀 3500

最近使用vue2做了乙個專案,

生命週期鉤子分別是:

beforecreate:例項剛建立,屬性繫結之前

created:例項建立完成,屬性繫結,但是還未將例項掛載到'el'上,也就是掛載元素上。

beforemount:模板編譯/掛載前

mounted:模板編譯/掛載之後

在mounted請求資料時,將資料更新到已經初始化後的資料裡。在這個過程中,會先執行beforeupdate後執行updated,在這兩個生命鉤子間執行dom的重新渲染和patch(不知道怎麼去形容,原意是補丁的意思,按我理解就是將原來data沒有的資料新增到data裡面)

在執行手動銷毀(例項名.$destroy())後執行beforedestroy

在beforedestroy和destroyed之間會將資料監聽(watchers),事件監聽(listeners)和子元件(components)拆除。

再執行destroyed。

舉例對生命鉤子的使用:

beforcreate:在載入dom建立例項時插入loading等

created:結束loading

mounted:發起資料請求,更新資料

beforedestory:在這可以詢問是否是刪除某某某

值得一提的是,當你更改資料後,beforecreate等不會在執行,而是直接執行beforeupdate和updated

Vue2的生命週期

vue 例項有乙個完整的生命週期,也就是從開始建立 初始化資料 編譯模版 掛載 dom 渲染 更新 渲染 解除安裝等一系列過程,我們稱這是 vue 的生命週期。生命週期 描述beforecreate 元件例項被建立之初,data 和 methods 中的資料還沒有初始化 created 元件例項已經...

vue2中監聽生命週期(hook)

很多人都知道,vue3中加入了hook的概念,讓我們 看的更為整齊,但是不少人卻不知道,其實vue2中已經有了 hook 的概念。下面就給大家說說vue2中怎麼使用hook 先上一段 大多數人在開發過程中都是這麼寫的,這麼寫不能說不好吧,但是 過分分散,很是雜亂,中間可能相差幾百行,可讀性相當差 下...

Vue2 生命週期 lifecycle

出處 我的github部落格 doctype html html head title welcome to vue title script src script head body div id div script var newvue beforecreate created beforem...