Vue生命周期：一個(gè)Vue實(shí)例從創(chuàng)建到銷(xiāo)毀的整個(gè)過(guò)程。
生命周期四個(gè)階段：創(chuàng)建(響應(yīng)式數(shù)據(jù))->掛載(渲染模板)->更新(修改數(shù)據(jù)，更新視圖)->銷(xiāo)毀(銷(xiāo)毀實(shí)例)
eg:
const app = new Vue({
el: '#app',
data: {
number: 33
},
//1.創(chuàng)建階段(準(zhǔn)備數(shù)據(jù))
beforeCreate(){//創(chuàng)建之前，還不能發(fā)送初始化的請(qǐng)求
},
created(){//創(chuàng)建之后，可以發(fā)送
},
//2.掛載階段(渲染模板)
beforeMount(){
},
mounted(){//開(kāi)始操作dom
},
//3.更新階段(修改數(shù)據(jù)->更新視圖【才會(huì)觸發(fā)這個(gè)階段】)
beforeUpdate(){
},
updated(){
},
//卸載階段
beforeDestroy(){//釋放Vue以外的資源(清除定時(shí)器，延時(shí)器...)
},
destroyed(){
}
})案例——記事本！
1.成果展示
2.需求：商品的添加與刪除；價(jià)格超過(guò)500標(biāo)紅；統(tǒng)計(jì)計(jì)算總消費(fèi)；消費(fèi)賬單使用餅圖展示
3.思路分析：
（1）.基本渲染 ?
- 立刻發(fā)送請(qǐng)求獲取數(shù)據(jù) created
- 拿到數(shù)據(jù)，存到data的響應(yīng)式數(shù)據(jù)中
- 結(jié)合數(shù)據(jù)，進(jìn)行渲染 v-for
- 消費(fèi)統(tǒng)計(jì) ?—> 計(jì)算屬性
（2）.添加功能
- 收集表單數(shù)據(jù) v-model；使用指令修飾符處理數(shù)據(jù)
- 給添加按鈕注冊(cè)點(diǎn)擊事件，對(duì)輸入的內(nèi)容做非空判斷，發(fā)送請(qǐng)求
- 請(qǐng)求成功后，對(duì)文本框內(nèi)容進(jìn)行清空
- 重新渲染列表(把created內(nèi)容封裝成方法)
（3）.刪除功能
- 注冊(cè)點(diǎn)擊事件，獲取當(dāng)前行的id
- 根據(jù)id發(fā)送刪除請(qǐng)求
- 需要重新渲染
（4）.餅圖渲染
- 初始化一個(gè)餅圖 echarts.init(dom) ? ?dom需要在mounted鉤子中渲染文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-803102.html
- 根據(jù)數(shù)據(jù)試試更新餅圖 echarts.setOptions({...})文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-803102.html
到了這里，關(guān)于Vue生命周期--四大階段--8個(gè)鉤子之mounted鉤子的渲染的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
