元件生命週期

元件生命週期指的是元件從建立到銷毀的過程，在這個過程中的一些不同的階段，vue會呼叫指定的一些元件方法

基本生命週期函式有下面幾個階段：

每乙個階段都對應著 之前 和 之後 兩個函式

beforecreate()

初始化階段，應用不多

created()

在例項建立完成後被立即呼叫，該階段完成了對data中的資料的observer，該階段可以處理一些非同步任務

beforemount()

在掛載開始之前被呼叫，應用不多

mounted()

該階段執行完了模板解析，以及掛載。同時元件根元件元素被賦給了$el屬性，該階段可以通過 dom 操作來對元件內部元素進行處理了

beforeupdate()

資料更新時呼叫，但是還沒有對檢視進行重新渲染，這個時候，可以獲取檢視更新之前的狀態

updated()

由於資料的變更導致的檢視重新渲染，可以通過 dom 操作來獲取檢視的最新狀態

beforedestroy()

例項銷毀之前呼叫，移除一些不必要的冗餘資料，比如定時器

destroyed()

vue 例項銷毀後呼叫

errorcaptured()

當捕獲乙個來自子孫元件的錯誤時被呼叫，此鉤子會收到三個引數：錯誤物件、發生錯誤的元件例項以及乙個包含錯誤**資訊的字串。此鉤子可以返回false以阻止該錯誤繼續向上傳播。

如果我們希望獲取元件節點，進行 dom 相關操作，可以通過ref和$refs來完成

獲取 box 的高度button

>

@click

="getkkbcomponent"

>

獲取自定義元件例項及內部方法button

>

>

ref=

"box"

>

這是內容

>

這是內容

>

這是內容

>

這是內容

>

這是內容

>

div>

>

ref=

"kkb"

:t="title"

>

kkb-component

>

div>

src=

"">

script

>

>

const kkbcomponent =},

template:

`

`, methods:}}

newvue(,

components:

,mounted()

, methods:

,getkkbcomponent()

}});

script

>

body

>

html

>

給元素或元件新增ref屬性，則該元素或元件例項物件將被新增到當前元件例項物件的$refs屬性下面

該屬性的是乙個物件，儲存了通過ref繫結的元素物件或者元件例項物件

作用：可以讓vue直接操作dom

另類的傳參方式

當資料更新的時候，檢視並不會立即渲染，這個時候我們期望獲取到檢視更新後的資料，可以通過nexttick來進行操作

設定新的內容button

>

>

ref=

"box"

style

="background

: red

" v-html

="content"

>

div>

div>

src=

"">

script

>

>

newvue(,

computed:},

methods:)}

}});

script

>

body

>

html

>

nexttick方法將在更新佇列迴圈結束之後立即呼叫

元件生命週期

三大階段 失效階段，提交階段，度量階段 失效階段 對元件屬性setter函式中，若有發生改變，則標記屬性失效，為了防止多次呼叫setter而導致頻繁更改屬性，所以呼叫屬性失效函式，當當前ui存放進 layoutmannger的失效佇列中，並新增layoutmannger的延遲偵聽，在下一幀才進行相應...

元件生命週期

元件生命週期 react component通過其定義的幾個函式來控制項在生命週期的各個階段的動作。constructor props,context 建構函式，在建立元件的時候呼叫一次。void componentwillmount 在元件掛載之前呼叫一次。如果在這個函式裡面呼叫setstate，...

元件生命週期

當元件例項被建立並插入 dom 中時，其生命週期呼叫順序如下 我們看一下載入順序 元件更新的生命週期呼叫順序如下 render 再次呼叫 componentdidupdate 資料狀態更新之後會呼叫 componentwillunmount 元件在解除安裝之前會呼叫這個方法 錯誤處理 當渲染過程，生...