vue生命周期過程簡單敘述

2019-11-16    seo達(dá)人

vue 生命周期

每個 Vue 實例在被創(chuàng)建時都要經(jīng)過一系列的初始化過程。設(shè)置數(shù)據(jù)監(jiān)聽、編譯模板、掛載等等。vue生命周期還是不太容易理解,這里就簡單地說一下它的整個過程。

1創(chuàng)建一個vue實例



new vue({

data () {

return {

}

    }

})



2 初始化事件和生命周期 beforeCreate 創(chuàng)建實例之前執(zhí)行的鉤子函數(shù)

3 初始化·注入和校驗 created 實例創(chuàng)建完成后執(zhí)行的鉤子



new vue ({

data () {

return {

a: 1

}

},

created: function () {

console.log('created')

}

})



4 渲染頁面 編譯 beforeMount 將編譯完成的html掛載在虛擬dom時執(zhí)行的鉤子

5 mouted鉤子 掛載完畢對數(shù)據(jù)進行渲染 會做一些ajax情求初始化數(shù)據(jù) mounted整個實例過程中只執(zhí)行一次



new vue ({

data () {

return {

a: 1

}

},

created: function () {

console.log('created')

},

// 一些鉤子函數(shù)

mouted: function () {

console.log('mounted')

}

})



6 修改數(shù)據(jù) beforeUpdate 更新之前的鉤子

7 updated 修改完成重新渲染

8 準(zhǔn)備解除綁定子組件以及事件監(jiān)聽器 beforeDestroy

9 銷毀完成 destroyed


日歷

鏈接

個人資料

存檔