2019-11-16 seo達(dá)人
vue 生命周期
每個(gè) Vue 實(shí)例在被創(chuàng)建時(shí)都要經(jīng)過一系列的初始化過程。設(shè)置數(shù)據(jù)監(jiān)聽、編譯模板、掛載等等。vue生命周期還是不太容易理解，這里就簡單地說一下它的整個(gè)過程。
1創(chuàng)建一個(gè)vue實(shí)例
new vue({
data () {
return {
}
}
})
2 初始化事件和生命周期 beforeCreate 創(chuàng)建實(shí)例之前執(zhí)行的鉤子函數(shù)
3 初始化·注入和校驗(yàn) created 實(shí)例創(chuàng)建完成后執(zhí)行的鉤子
new vue ({
data () {
return {
a: 1
}
},
created: function () {
console.log('created')
}
})
4 渲染頁面 編譯 beforeMount 將編譯完成的html掛載在虛擬dom時(shí)執(zhí)行的鉤子
5 mouted鉤子 掛載完畢對數(shù)據(jù)進(jìn)行渲染 會(huì)做一些ajax情求初始化數(shù)據(jù) mounted整個(gè)實(shí)例過程中只執(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
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.ywne.cn