Vue生命周期中的八個鉤子函數相機

1、beforeCreate和created函數

beforeCreate和created以初始化:數據監測、數據代理為分界線。

在執行beforeCreate()之前,將初始化生命周期、時間,但數據代理還沒有開始。

(1)beforeCreate():在初始化數據監測、數據代理之前執行beforeCreate函數中的內容。此時,無法通過Vm訪問到data中的數據、methods中的方法

(2)created():在初始化數據監測、數據代理之後執行beforeCreate函數中的內容。此時可以通過vm訪問到data中的數據、methods中配置的方法

在數據掛載之前還有一個步驟,那就是Vue解析模板的過程(生成虛擬DOM),頁面還不能顯示解析好的內容。

2、beforeMount和mounted函數

(3)beforeMount():在Vue完成虛擬DOM的生成之後,在將虛擬DOM轉換為真實DOM之前執行。此時,頁面呈現的是未經Vue編譯的DOM結構,所有對DOM的操作,最終都不奏效。

(4)mounted():在將虛擬DOM轉換為真實DOM之後執行。此時,頁面中呈現的是經過Vue編譯的DOM,對DOM的操作均有效(盡可能避免)。至此初始化過程結束,一般在此進行:開啟定時器、發送網絡請求、訂閱消息、綁定自定義事件等初始化操作

3、beforeUpdate和updated函數

(5)beforeUpdate():在數據發生變化時,生成新的虛擬DOM,隨後與舊的虛擬DOM進行比較,最終完成頁面更新(Model-》View)的過程之前執行。此時,數據是新的,但頁面是舊的,即,頁面尚未和數據保持同步

(6)updated():在數據發生變化時,生成新的虛擬DOM,隨後與舊的虛擬DOM進行比較,最終完成頁面更新(Model-》View)的過程之後執行。此時,數據是新的,頁面也是新的,即,頁面和數據保持同步

4、beforeDestroy和destroyed函數

(7)beforeDestroy():在移除數據監視、子級元素、事件監聽之前執行。此時,vm中所有的data、methods、指令等都處於可用狀態,馬上要執行銷毀過程,一般在此階段:關閉定時器、取消訂閱消息、解綁自定義事件等收尾操作。此時所有東西都可訪問到,但是執行操作,頁面上的內容不會發生改變

(8)destroyed():在移除數據監視、子級元素、事件監聽之後執行。解除與頁面上data、methods、指令等的綁定。

總結

本篇文章就到這裡瞭,希望能夠給你帶來幫助,也希望您能夠多多關註WalkonNet的更多內容!

推薦閱讀: