建站
咨詢
售后
建站咨詢
新聞中心
Vue的生命周期有8個(gè)階段，它們分別是：
創(chuàng)新互聯(lián)，為您提供重慶網(wǎng)站建設(shè)、重慶網(wǎng)站制作、網(wǎng)站營(yíng)銷推廣、網(wǎng)站開(kāi)發(fā)設(shè)計(jì)，對(duì)服務(wù)資質(zhì)代辦等多個(gè)行業(yè)擁有豐富的網(wǎng)站建設(shè)及推廣經(jīng)驗(yàn)。創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司成立于2013年,提供專業(yè)網(wǎng)站制作報(bào)價(jià)服務(wù),我們深知市場(chǎng)的競(jìng)爭(zhēng)激烈，認(rèn)真對(duì)待每位客戶，為客戶提供賞心悅目的作品。 與客戶共同發(fā)展進(jìn)步，是我們永遠(yuǎn)的責(zé)任！
1、beforeCreate
2、created
3、beforeMount
4、mounted
5、beforeUpdate
6、updated
7、beforeDestroy
8、destroyed
下面是詳細(xì)的解釋和示例代碼：
Vue生命周期
Vue實(shí)例有一個(gè)完整的生命周期，從創(chuàng)建到銷毀，在每個(gè)階段，Vue都會(huì)觸發(fā)一些特定的事件，我們可以在這些事件中執(zhí)行自定義的邏輯。
1. beforeCreate
在實(shí)例初始化之后，數(shù)據(jù)觀測(cè) (data observer) 和事件/監(jiān)聽(tīng)器 (event/watcher) 尚未被初始化。
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
beforeCreate: function () {
console.log('beforeCreate');
}
});
2. created
在實(shí)例創(chuàng)建完成后被立即調(diào)用，在這一步，實(shí)例已完成以下的配置：數(shù)據(jù)觀測(cè)(data observer)，屬性和方法的運(yùn)算，watch/event事件回調(diào)，掛載階段還沒(méi)開(kāi)始，$el屬性目前不可見(jiàn)。
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
created: function () {
console.log('created');
}
});
3. beforeMount
在掛載開(kāi)始之前被調(diào)用：相關(guān)的render函數(shù)首次被調(diào)用，該鉤子在服務(wù)器端渲染期間不會(huì)被調(diào)用。
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
beforeMount: function () {
console.log('beforeMount');
}
});
4. mounted
el被新創(chuàng)建的vm.$el替換，并掛載到實(shí)例上去之后調(diào)用該鉤子，如果實(shí)例被掛載到一個(gè)文檔內(nèi)的元素上，當(dāng)mounted被調(diào)用時(shí)vm.$el也在文檔內(nèi)，該鉤子在服務(wù)器端渲染期間不會(huì)被調(diào)用。
{{ message }}
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
mounted: function () {
console.log('mounted');
}
});
5. beforeUpdate
數(shù)據(jù)更新時(shí)調(diào)用，發(fā)生在虛擬DOM重新渲染和打補(bǔ)丁之前，你可以在這個(gè)鉤子中進(jìn)一步改變狀態(tài)，這不會(huì)觸發(fā)附加的重渲染過(guò)程，該鉤子在服務(wù)器端渲染期間不會(huì)被調(diào)用。
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
beforeUpdate: function () {
console.log('beforeUpdate');
}
});
6. updated
由于數(shù)據(jù)更改導(dǎo)致的虛擬DOM重新渲染和打補(bǔ)丁之后調(diào)用，該鉤子在服務(wù)器端渲染期間不會(huì)被調(diào)用。
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
updated: function () {
console.log('updated');
}
});
7. beforeDestroy
實(shí)例銷毀之前調(diào)用，在這一步，實(shí)例仍然完全可用，這意味著實(shí)例的所有屬性和狀態(tài)都是可用的，該鉤子在服務(wù)器端渲染期間不會(huì)被調(diào)用。
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
beforeDestroy: function () {
console.log('beforeDestroy');
}
});
8. destroyed
Vue實(shí)例銷毀后調(diào)用，調(diào)用后，Vue實(shí)例指示的所有東西都會(huì)解綁定，所有的事件監(jiān)聽(tīng)器會(huì)被移除，所有的子實(shí)例也會(huì)被銷毀，該鉤子在服務(wù)器端渲染期間不會(huì)被調(diào)用。
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
destroyed: function () {
console.log('destroyed');
}
});
本文題目：vue生命周期有幾個(gè)
URL地址：http://www.fisionsoft.com.cn/article/copjjei.html
