vue生命週期講解

2022-10-11 00:57:07 字數 1019 閱讀 1663

1.生命週期,簡而言之就是乙個事務從出生到消失的過程。例如,乙個人從出生到去世。

在這裡我們是指從建立vue物件到銷毀vue物件的過程

2.鉤子函式

(1)鉤子函式是vue框架中內建的一些函式,隨著vue的生命週期階段,自動執行

(2)作用:特定的時間,執行特定的操作

3.vue生命週期之初始化階段

new vue(): vue例項化物件(元件也是乙個的vue例項化物件)

init events & lifecycle:初始化事件和生命週期函式

beforecreate:生命週期函式被執行此時不能訪問data和menthods等中的東西

init injections&reactivity:vue內部新增data和methods等

created:生命週期鉤子函式被執行,例項建立此時能訪問data和menthods等中的東西

接下來開始編譯模板:開始分析

has el option? :是否有el選項 – 檢查要掛到**

沒有. 呼叫$mount()方法

有, 繼續檢查template選項

4.vue生命週期之掛載

template選項檢查:

有:編譯template返回render渲染函式

無:編譯el選項對應標籤作為template(要渲染的模板)vue工程專案不支援

虛擬dom掛載成真實dom之前:

beforemount :生命週期鉤子函式被執行

create: 把虛擬dom和渲染的資料一併掛到真實dom上

掛載完畢,mounted:生命週期鉤子函式被執行

5.vue之更新

6.vue之銷毀

當$destroy()被呼叫:比如元件dom被移除(例v-if)

beforedestroy:生命週期鉤子函式被執行

拆卸資料監視器、子元件和事件偵聽器

例項銷毀後, 最後觸發乙個鉤子函式

destroyed: 生命週期鉤子函式被執行

例:

}+

vue生命週期

beforecreate 元件例項剛剛被建立,屬性都沒有 create 例項已經建立完成,屬性已經繫結 beforemount 模板編譯之前 mounted 模板編譯之後 beforeupdate 元件更新之前 updated 元件更新完畢 beforedestroy 元件銷毀之前 destroye...

vue生命週期

vue把整個生命週期劃分為建立 掛載 更新 銷毀等階段,每個階段都會給一些 鉤子 讓我們來做一些我們想實現的動作。學習例項的生命週期,能幫助我們理解vue例項的運作機制,更好地合理利用各個鉤子來完成我們的業務 我們分別來看看這幾個階段 1.beforecreate 此階段為例項初始化之後,此時的資料...

Vue 生命週期

import vue from vue el root 沒有的話,使用render,繼續沒有,就把el的outerhtml編譯成模板 template temp data beforecreate created el是原來的el beforemount 渲染函式 render h this.tex...