[微精通：網頁設計Vue + Node.js + MySQL] 3.6 Vue的生命週期

張貼者： 日期：
生命週期即為整個Vue的運作順序，搭配生命週期，可幫助你在適當的時機執行你要的程式，比如在一開始執行我們的確認15+歲的程式。

 

image/svg+xml3.6. Vue 的⽣命週期 <meta charset = "utf-8" > <html> <!-- 略過⼀些 html —> <body> <div id = 'app' > <!-- 略過⼀些 html —> </div > </body> < script > var result = confirm ( ' 確定已滿 15+ ? ' ); if ( result == false ){ location.href = " http://www.google.com " ; } new Vue( { el: '#app' , // 略過⼀些程式 } ) ; </script> </html> <meta charset = "utf-8" > <html> <!-- 略過⼀些 html —> <body> <div id = 'app' > <!-- 略過⼀些 html —> </div > </body> < script > new Vue( { el: '#app' , // 略過⼀些程式 mounted : function () { var result = confirm( ' 確定已滿 15+ ?' ); if (result == false ){ location.href= "http://www.google.com" ; } } , // 略過⼀些程式 } ) ; </script> </html> <meta charset = "utf-8" > <html> <!-- 略過⼀些 html —> <body> <div id = 'app' > <p> Message: {{ message }} </p> <input type = 'textbox' v-model = 'message' > </div> </body> <script> new Vue( { el: '#app' , data: { message: '' }, beforeCreate : function (){ console.log( 'beforeCreate' ); }, created : function (){ console.log( 'created' ); }, beforeMount : function (){ console.log( 'beforeMount' ); }, mounted : function (){ console.log( 'mounted' ); }, beforeUpdate : function (){ console.log( 'beforeUpdate' ); }, updated : function (){ console.log( 'updated' ); }, beforeDestory : function (){ console.log( 'beforeDestory' ); }, destroy : function (){ console.log( 'destroy' ); } } ) ; </script> </html> 指令 功能 v-bind 單向綁定，單向將 data 中的屬性輸出成畫⾯上。 v-model 雙向綁定，單向將 data 中的屬性輸出成畫⾯上，也從 <input><select> 等可輸入的控制項中把值同步回 data 中的屬性。 v-for 依 data 中的陣列屬性重複產⽣ DOM 元素。 v-if 依條件決定是否產⽣ DOM 元素。 v-show 依條件決定是否顯⽰ DOM 元素。 v-on 將 Vue 中 methods 的⽅法綁定到 HTML 的事件上。 原先的 com f rm() 函式確認是否 15+ 歲的程式， 怎麼放在 Vue 中呢 ? 1. 這是我們使⽤的 Vue ，幫助們們主動更新 DOM 元素。 Vue 的⽣命週期 w3_6_1 - home.html 2. 但當初的確認是否為 15 歲以 上的程式，也可以放在 Vue 中嗎 ? monuted 事件，放入是否 15+ 歲的 com f rm() 程式 w3_6_2 - home.html w3_6_3 - home.html 1. mounted 事件會在 Vue 物件掛載⾄ id 為 "app" 這個元 素時觸發，也表⽰ id 為 app 的 <div> 從此時由 Vue 管控。 2. 因此我們在 mounted 事件掛載的函式中 寫下確認是否為 15 歲以上的程式。 3. 因此進入網⾴後並在 Vue 物件建立後就 會執⾏ mounted 事件中的程式，以顯⽰是 否為 15 歲以上的確認畫⾯。 4. 比較有趣的是， confrim() 函式會讓整個 JavaScript 程式停⽌執⾏，因此不會執⾏到 v-for 去轉換每個殭屍資料為 <li>DOM 元素，你會看到 Vue 還沒轉換前的 html Vue 語法。當然這些是可透過⼀ 些技巧避免的，比如先將所有 id=app 內的 html 使⽤ CSS 隱藏，執到確定滿 15 歲後才顯⽰。 1 1 1. Vue 在 new 完全建立前會 先引發 beforeCreate 事件。 2. 接著 Vue 物件建立後引發 created 事件。 4. 接著 Vue 物件掛載⾄ id 為 app 的 <div> 後引發 mounted 事件。 5. 管控期間，若 Vue 有依 data 中的資料重新輸出 DOM 元 素，在輸出前會先引發 beforeUpdated 事件。 3. 接著 Vue 物件掛載⾄ id 為 app 的 <div> 之前引發 beforeMount 事件。 6. 比如在輸入 v-model 為 message 的 <input> 元素中輸入資料，只要輸入 Vue 就會更新 message 屬性，⽽後重新輸出與 message 有關的 DOM 元素，這時就會引發 beforeUpdate 。 7. updated 事件則是相對於 beforUpdate 事 件，是在 Vue 將 DOM 元素輸出後引發。 8. 在 Vue 物件消毀前呼叫。 9. 在 Vue 物件消毀後呼叫。 10. 在⽬前的範例中 Vue 只有在關閉視窗時才會被消毀。未 來若使⽤ Vue 製作網⾴上的⼀個⼀個元件，則機會使⽤到 beforeDestory 與 destroy 事件。 1 2 3 4 1 2 4 3 11. 在進入網⾴後， Vue 就會依序觸發 beforeCreate 、 created 、 beforeMount 與 mounted 四個事件。 12. 在 <input> 中輸入值，就會引發 beforeUpdate 事件與 updated 事件。 13. 原因是輸入後 Vue 會將 message 屬性透 過 {{message}} 同步⾄畫⾯上。這時就會引 發 beforeUpdate 與 updated 事件。 5 6 5 6 Vue 指令整理

留言

張貼留言