Vue生命週期

2021-10-19 23:08:50 字數 628 閱讀 2152

​ 概念:從vue例項建立、執行、銷毀時,總伴隨著各種事件,而那些事件統稱為生命週期

​ 生命週期鉤子 = 生命週期函式 = 生命週期事件

此圖**於vue官網

new vue() ->初始化乙個空的vue例項,僅有一些預設的生命週期函式和預設方法-> 初始化資料和方法

會校驗el屬性,再檢視是否具有template -->辨別是將html模組編譯成模板還是直接模板

此時該模板字串便被渲染為 記憶體中的dom,即還未被載入於頁面

將剛才的模板字串渲染到瀏覽器的頁面中來

本階段會檢視資料是否有變化–>yes,則重新渲染、掛載頁面

var vm = new vue(,

beforecreate(),

created(),

beforemount()} 還未有效

},mounted(),

beforeupdate(),

updated(),

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