Vue.js的生命周期詳細(xì)講解

本篇內(nèi)容主要講解“Vue.js的生命周期詳細(xì)講解”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“Vue.js的生命周期詳細(xì)講解”吧!

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡(jiǎn)單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：申請(qǐng)域名、虛擬主機(jī)、營(yíng)銷軟件、網(wǎng)站建設(shè)、興寧網(wǎng)站維護(hù)、網(wǎng)站推廣。

用Vue框架，熟悉它的生命周期可以讓開發(fā)更好的進(jìn)行。

首先先看看官網(wǎng)的圖，詳細(xì)的給出了vue的生命周期:

它可以總共分為8個(gè)階段：

1. beforeCreate（創(chuàng)建前）,

2. created（創(chuàng)建后）,

3. beforeMount(載入前),

4. mounted（載入后）,

5. beforeUpdate（更新前）,

6. updated（更新后）,

7. beforeDestroy（銷毀前）,

8. destroyed（銷毀后）

然后用一個(gè)實(shí)例的demo 來演示一下具體的效果：

<div id=app>{{a}}</div>

<script>

var myVue = new Vue({          

el: "#app",          

data: {

a: "Vue.js"        

},         

 beforeCreate: function() { 

          console.log("創(chuàng)建前")            

console.log(this.a)            

console.log(this.$el)          

},         

 created: function() {

                console.log("創(chuàng)建之后");            

console.log(this.a)            

console.log(this.$el)          

},         

 beforeMount: function() {            

console.log("mount之前")            

console.log(this.a)            

console.log(this.$el)          

},          

mounted: function() {            

console.log("mount之后")            

console.log(this.a)            

console.log(this.$el)          

},          

beforeUpdate: function() {            

console.log("更新前");            

console.log(this.a)            

console.log(this.$el)          

},          

updated: function() {            

console.log("更新完成");            

console.log(this.a);            

console.log(this.$el)          

},          

beforeDestroy: function() {            

console.log("銷毀前");            

console.log(this.a)            

console.log(this.$el)            

console.log(this.$el)          

},          

destroyed: function() {           

console.log("已銷毀");          

console.log(this.a)          

console.log(this.$el)          

}   

  });  

</script>

運(yùn)行后，查看控制臺(tái)，

得到這個(gè)：

 

然后再methods 里面添加一個(gè)change方法：

<div id=app>{{a}}
<button v-on:click="change">change</button>
</div>

點(diǎn)擊按鈕之后出現(xiàn)的是：

這就是vue的生命周期，很簡(jiǎn)單吧。

到此，相信大家對(duì)“Vue.js的生命周期詳細(xì)講解”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

網(wǎng)頁(yè)題目：Vue.js的生命周期詳細(xì)講解
本文鏈接：http://bm7419.com/article16/igshgg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計(jì)、外貿(mào)網(wǎng)站建設(shè)、小程序開發(fā)、營(yíng)銷型網(wǎng)站建設(shè)、服務(wù)器托管、網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)