vue例項生命週期鉤子

2022-05-07 01:24:09 字數 1737 閱讀 7519

每個 vue 例項在被建立時都要經過一系列的初始化過程——例如,需要設定資料監聽、編譯模板、將例項掛載到 dom 並在資料變化時更新 dom 等。同時在這個過程中也會執行一些叫做生命週期鉤子的函式,這給了使用者在不同階段新增自己的**的機會。注意:生命週期鉤子的this上下文指向呼叫它的 vue 例項。

注意:不要在選項屬性或**上使用箭頭函式,比如created: () => console.log(this.a)vm.$watch('a', newvalue => this.mymethod())。因為箭頭函式並沒有thisthis會作為變數一直向上級詞法作用域查詢,直至找到位置,經常導致uncaught typeerror: cannot read property of undefineduncaught typeerror: this.mymethod is not a function之類的錯誤。

="修改msg"

@click

="msg='no'"

>

13<

h1 id

="h3"

>}

h1>

14div

>

15<

script

>

16varvm=

newvue(,

21methods:

25},

26beforecreate () ,

33created () ,

38beforemount () ,

45mounted () ,

51beforeupdate () ,

58updated ()

6364

})65

script

>

66body

>

67html

>

vue生命週期鉤子

el 表示dom元素,data 表示資料 deforecreated el和data並未初始化 created 完成了data資料的初始化,el沒有 beforemount 完成了el和data初始化 mounted 完成掛載 el和data都初始化完成,並且掛載在頁面上了 注意 以下勾子只能在 k...

Vue 生命週期鉤子

從vue例項建立,執行,到銷毀期間,總是伴隨著各種各樣的事件,這些事件,稱為生命週期。建立 beforecreate 例項剛剛在記憶體中被建立出來,但data和methods還沒有進行初始化。created 例項已經在記憶體中建立,data和methods還沒有建立 beforemount 完成模板...

vue生命週期鉤子

生命週期 vue 例項從開始建立 初始化資料 編譯模板 掛載dom 渲染 更新 渲染 解除安裝等一系列過程,我們稱這是 vue 的生命週期,各個階段有相對應的事件鉤子。函式元件狀態 最好的用法 beforecreate 例項初始化之後,this指向建立的例項,不能訪問到data computed w...