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