vue生命週期理解乾貨

2021-10-11 02:56:50 字數 978 閱讀 8511

​ data和methods中的資料都還沒有初始化完成

​ 如果要呼叫methods中的方法 或者操作data中的資料最早只能在created中操作

​ 這裡是遇到的第三個生命週期 表示模板已經在記憶體中編譯完成了 但是尚未把模板渲染到 頁面中

​ //執行的時候頁面中的元素還未真正的替換過來 只是之前的一些模板字串

​ 這是第四個生命週期函式 表示記憶體中的模板已經真實的掛載到了頁面中 使用者已經可以看到渲染到的頁面了 只要執行完了mounted 表示整個vue例項全部初始化完畢了 元件已經脫離了建立階段 進入到了執行階段

​ 資料被更新了 當執行beforeupdata時 頁面中顯示的資料,還是舊的 此時data的資料是新的,但是頁面尚未和最新的資料保持同步

​ 頁面和資料保持了同步更新

​ 這一步執行的是:先根據data中最新的資料,在記憶體中,重新渲染出乙份 最新的記憶體dom樹

​ 當最新的記憶體dom樹被更新後 會把其渲染到頁面上去,這時候就完成了資料從data( model層 ) -> view (檢視層)的更新

這兩個事件(beforeupdata updated)會根據data資料的改變而選擇性的觸發0次到多次

​ 當執行了beforedestroy鉤子時,vue例項已經從執行階段,進入到了銷毀過程

​ 但是此時例項身上的所有 data methods 過濾器 指令等等都處於乙個可以用的狀態 此時還未真正銷毀

當執行到了destroyed函式時 元件已經被完全銷毀了 元件中所有的資料 方法指令等等都已經不可以使用

vue生命週期理解

關於vue面試,最常問到的就是vue的生命週期,也看過很多關於如何回答過這個問題的解答,自己也有所總結,就簡單寫寫自己的看法。首先我們先來到vue的官網看看他是如何解釋的vue官網對生命週期描述 主要就是體現在這個圖上 可以看出生命週期中有8個主要的鉤子函式,分別是 activated與deacti...

vue生命週期 鉤子理解

在vue文件中,對生命週期部分有如下檢視 建立vue例項 init events lifecycle 開始初始化 beforecreate 元件剛被建立,組建屬性計算之前,如data屬性等 init injections reactivity 通過依賴注入匯入依賴項 created 元件例項建立完成...

Vue 生命週期的理解

最近做了幾個vue的專案,寫寫對生命週期的理解,先看圖 這些圖是網路的,侵權必刪beforecreate 元件剛建立,資料和dom都未初始化,我們在beforecreate的時候千萬不要去修改data裡面賦值的資料,最早也要放在created裡面去做 新增一些行為此時的this,並不會指向例項物件 ...