vue中各選項及鉤子函式執行順序

2021-08-15 20:18:26 字數 1249 閱讀 2669

在vue中,例項選項和鉤子函式和}表示式都是不需要手動呼叫就可以直接執行的。

vue的生命週期如下圖:

在頁面首次載入執行順序有如下:

beforecreate                //在例項初始化之後、建立之前執行

created                         //例項建立後執行

beforemounted             //在掛載開始之前呼叫

filters     //掛載前載入過濾器

computed                     //計算屬性

directives-bind              //只呼叫一次,在指令第一次繫結到元素時呼叫

directives-inserted        //被繫結元素插入父節點時呼叫

activated                       //keek-alive元件被啟用時呼叫,則在keep-alive包裹的巢狀的子元件中觸發

mounted

//掛載完成後呼叫

}                                //mustache表示式渲染頁面

修改頁面input時,被自動呼叫的選項順序如下:

watch                           //首先先監聽到了改變事件

filters    //過濾器沒有新增在該input元素上,但是也被呼叫了

beforeupdate              //資料更新時呼叫,發生在虛擬dom打補丁前

directived-update        //指令所在的元件的vnode更新時呼叫,但可能發生在其子vnode更新前

directives-componentupdated//指令所在的元件的vnode及其子元件的vnode全部更新後呼叫

updated                      //元件dom已經更新

元件銷毀時,執行順序如下

beforedestroy            //例項銷毀之前呼叫

directives-unbind       //指令與元素解綁時呼叫,只呼叫一次

deactivated                //keep-alive元件停用時呼叫

destroyed                  //例項銷毀之後呼叫

mounted鉤子函式 對vue中鉤子函式的理解

1 beforecreate 鉤子 該階段元件例項剛建立,元件屬性計算之前 可理解為元件屬性還未初始化,未繫結,未掛載元素el 比如 el,data,methods等,如果你試圖在beforecreated鉤子中獲取這些屬性值,會得到ubdefined 的結果,但是 可以獲取到this物件,因為此時...

vue進入頁面執行的鉤子函式 vue的鉤子函式

鉤子函式 通過上述測試我們可以知道 在beforecreate階段,對瀏覽器來說,整個渲染流程尚未開始或者說準備開始,對vue來說,例項尚未被初始化,data observer和 event watcher也還未被呼叫,在此階段,對data methods或文件節點的呼叫現在無法得到正確的資料。在c...

Vue中mounted鉤子函式獲取節點高度出錯

遇到的問題 最近在開發乙個vue的專案,好幾個頁面都有用到乙個 頁面樓層滑動的元件,我就直接封裝成了乙個,但是遇到乙個bug,就是我需要得到這個元件的offsettop,然後頁面滾動到這個位置的時候,就設定position屬性為fixed,讓他固定在螢幕上。問題是當我在mounted鉤子函式中獲取o...