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...