當前位置:成語大全網 - 書法字典 - vue生命周期的詳細說明

vue生命周期的詳細說明

在vue源代碼中,生命周期函數的最終執行是調用callHook方法。callHook函數的邏輯非常簡單。根據傳入的生命周期類型鉤子,獲取vm對應的回調函數數組。$options[hook],然後遍歷執行,以vm作為函數執行的上下文。

1.新建Vue(選項):創建壹個vm實例;

2.合並選項(解析構造函數(VM。Constructor)、options、VM):將Vue構造函數中的選項與傳入選項合並,或者將父項和子項的選項合並。例如,在mergeOptions函數中,將調用mergeHook方法來合並生命周期的Hook函數。mergeHook方法的原則是只有當它是父數組時才返回父數組,只有當它是子數組時才返回子數組。當父元素和子元素都存在時,在父元素後添加子元素以返回組合數組。這也是為什麽父子都有鉤子函數時,先執行父親,再執行人;

3.initLifecycle(vm)、initEvents(vm)和initRender(vm):在創建的vm實例上初始化與生命周期、事件和渲染相關的屬性;

4.callHook(vm,' beforeCreate '):在Create之前調用生命周期鉤子函數;

5.initInjections(vm)、initState(vm)和initProvide(vm):初始化數據:註入、聲明和提供。initState的作用是初始化props、data、methods、watch、computed等屬性;

6.callHook(vm,' created '):調用創建的生命周期鉤子函數;

7.VM。$ mount (VM。$ options . El):$ mount方法在多個文件中定義,如“src/platform/web/entry-runtime-with-compiler . js”、“src/platform/web/runtime/index . js”、“src/platform/week/。因為$mount方法的實現與平臺和構造模式有關。以“entry-runtime-with-compiler.js”為例,關鍵步驟是檢查vm中是否有render方法。$options,如果沒有,最終的模板字符串將根據el和template屬性來確定。然後調用compileToFunctions方法將模板字符串轉換成render方法,最後在原原型上調用$mount方法,即開始執行“lifecycle.js”中的mountComponent方法;

8.callHook(vm,' beforeMount '):調用beforeMount生命周期鉤子函數;

9.vm。_ render()= & gt;vm。_ update()= & gt;Vm。__patch__():執行虛擬機。_render方法第壹,就是調用createElement生成虛擬DOM,也就是VNode,每個VNode都有子節點,子節點的每個元素也是?壹個VNode,這是怎麽形成的?vnodetree然後調用虛擬機。_更新第壹次渲染的方法。虛擬機的核心。_update方法是調用vm。補丁方法,和vm壹樣與平臺相關。$mount。虛擬機。patch方法是根據生成的VNode樹遞歸createElm方法創建壹棵真實的Dom樹並掛載到Dom上。

10.callHook(vm,' mount '):調用掛載生命周期鉤子函數:VNode補丁到Dom後,會執行' invokeInsertHook '函數,再次執行保存在insertedVnodeQueue中的掛載鉤子函數。insertedVnodeQueue隊列中的鉤子函數是在根據VNode Tree遞歸createElm方法創建真實Dom樹的過程中生成的鉤子函數的順序隊列,所以掛載的鉤子函數的執行順序是先子後父;

11.數據變更:數據更新,在nextTick中執行flushSchedulerQueue方法,將執行watcher隊列中的watcher;

12.Callhook (VM,' beforeUpdate '):執行watcher時,會執行watcher的Before方法,即調用BeforeUpdate生命周期鉤子函數;

13.虛擬DOM重渲染和修補:重渲染生成新的虛擬DOM,並將其修補到DOM上;

14.callHook(vm,' updated '):調用更新的生命周期鉤子函數;

15.vm。$destroy():啟動卸載和銷毀過程;

16.Callhook (VM,' beforeDestroy '):調用before destroy的生命周期鉤子函數;

17.拆卸觀察器、子組件和事件監聽器:執行壹系列銷毀操作。在執行$destroy期間,它將執行vm。__patch__(虛擬機。_vnode,null)來觸發其子組件的銷毀鉤子函數,逐層遞歸調用。因此,銷毀的鉤子函數的執行順序是先子後父。

18.Callhook (VM,' destroyed '):調用銷毀的生命周期鉤子函數。