6 Vue 生命週期

2022-04-29 12:18:12 字數 1215 閱讀 3314

beforecreate執行時:data和el均未初始化,值為undefined

beforemount執行時:data和el均已經初始化,但從}等現象可以看出此時el並沒有渲染進資料,el的值為「虛擬」的元素節點

mounted執行時:此時el已經渲染完成並掛載到例項上;文件已經渲染完畢,繫結事件!

總結:beforecreated:el 和 data 並未初始化 ;created:完成了 data 資料的初始化,el沒有;beforemount:完成了 el 和 data 初始化 ;mounted :完成掛載。(注意:在beforemount階段應用的 virtual dom(虛擬dom)技術,先把坑佔住了,到後面mounted掛載的時候再把值渲染進去。)

1、什麼是vue生命週期?

答:vue例項從建立到銷毀的過程,就是生命週期。也就是從開始建立、初始化資料、編譯模板、掛載dom->渲染、更新->渲染、解除安裝渲染等一系列過程。

2、vue生命週期的作用?

答:它的生命週期中有多個事件,讓我們在控制整個vue例項的過程是更容易形成好的邏輯。

3、第一次頁面載入會觸發哪幾個鉤子?

答:會觸發beforecreate、created、beforemount、mounted

4、鉤子函式

(1)beforecreate:在此之前宣告data中的變數

(2)created:vue例項建立好了,變數賦值了;多用來ajax從後端獲取資料

(3)beforemount:掛載dom之前,資料渲染之前

(4)mounted:用vue裡面的 $el 去替換頁面上的元素之後,

(5)update->修改data中的資料,然後更新頁面

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

注意:當vue例項裡,既有 el 又有 template;則template模板會覆蓋掉vue作用域(div領地)

mount掛載的含義:vue例項中的el、data 去替換vue作用域(div領地)

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