Vue物件的生命週期
阿新 • • 發佈：2020-09-04
Vue物件的生命週期
每個Vue物件在建立時都要經過一系列的初始化過程。在這個過程中Vue.js會自動執行一些叫做生命週期的的鉤子函式，我們可以使用這些函式，在物件建立的不同階段加上我們需要的程式碼，實現特定的功能。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.min.js"></script> <script> window.onload = function(){ var vm = new Vue({ el:"#app", data:{ num:0 }, beforeCreate:function(){ console.log("beforeCreate,vm物件尚未建立,num="+ this.num); //undefined this.name=10; // 此時沒有this物件呢，所以設定的name無效，被在建立物件的時候被覆蓋為0 }, created:function(){ console.log("created,vm物件建立完成,設定好了要控制的元素範圍,num="+this.num ); // 0 this.num = 20; }, beforeMount:function(){ console.log( this.$el.innerHTML ); // <p>{{num}}</p> console.log("beforeMount,vm物件尚未把data資料顯示到頁面中,num="+this.num ); // 20 this.num = 30; }, mounted:function(){ console.log( this.$el.innerHTML ); // <p>30</p> console.log("mounted,vm物件已經把data資料顯示到頁面中,num="+this.num); // 30 }, beforeUpdate:function(){ // this.$el 就是我們上面的el屬性了，$el表示當前vue.js所控制的元素#app console.log( this.$el.innerHTML ); // <p>30</p> console.log("beforeUpdate,vm物件尚未把更新後的data資料顯示到頁面中,num="+this.num); // beforeUpdate----31 }, updated:function(){ console.log( this.$el.innerHTML ); // <p>31</p> console.log("updated,vm物件已經把過呢更新後的data資料顯示到頁面中,num=" + this.num ); // updated----31 }, }); } </script> </head> <body> <div id="app"> <p>{{num}}</p> <button @click="num++">按鈕</button> </div> </body> </html>
總結：
1.在vue使用的過程中，如果要初始化操作，把初始化操作的程式碼放在 mounted 中執行。
mounted階段就是在vm物件已經把data資料實現到頁面以後。一般頁面初始化使用。例如，使用者訪問頁面載入成功以後，就要執行的ajax請求。
2.另一個就是created，這個階段就是在 vue物件建立以後，把ajax請求後端資料的程式碼放進 created
3.還有一個是updated,這個階段是data裡面的資料再次更新之後會觸發的方法。如：只有事先設定好的data變數如下arrData改變並且要在頁面重新渲染{{ arrData }}完成之後,才會進updated方法