本篇內容主要講解“Vue.js的生命周期詳細講解”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“Vue.js的生命周期詳細講解”吧!

讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業的熱愛。我們立志把好的技術通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領域值得信任、有價值的長期合作伙伴，公司提供的服務項目有：申請域名、虛擬主機、營銷軟件、網站建設、興寧網站維護、網站推廣。

用Vue框架，熟悉它的生命周期可以讓開發更好的進行。

首先先看看官網的圖，詳細的給出了vue的生命周期:

它可以總共分為8個階段：

1. beforeCreate（創建前）,

2. created（創建后）,

3. beforeMount(載入前),

4. mounted（載入后）,

5. beforeUpdate（更新前）,

6. updated（更新后）,

7. beforeDestroy（銷毀前）,

8. destroyed（銷毀后）

然后用一個實例的demo 來演示一下具體的效果：

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

<script>

var myVue = new Vue({          

el: "#app",          

data: {

a: "Vue.js"        

},         

 beforeCreate: function() { 

          console.log("創建前")            

console.log(this.a)            

console.log(this.$el)          

},         

 created: function() {

                console.log("創建之后");            

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>

運行后，查看控制臺，

得到這個：

 

然后再methods 里面添加一個change方法：

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

點擊按鈕之后出現的是：

這就是vue的生命周期，很簡單吧。

到此，相信大家對“Vue.js的生命周期詳細講解”有了更深的了解，不妨來實際操作一番吧！這里是創新互聯網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！

網頁題目：Vue.js的生命周期詳細講解
本文鏈接：http://www.yijiale78.com/article16/igshgg.html

成都網站建設公司_創新互聯，為您提供App設計、外貿網站建設、小程序開發、營銷型網站建設、服務器托管、網站制作

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯