十四、Vue的生命週期（鉤子函式）
阿新 • • 發佈：2018-12-17
Vue的生命週期（鉤子函式）
Vue一共有10個生命週期函式，我們可以利用這些函式在vue的每個階段都進行操作資料或者改變內容。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="../assets/js/vue.js"></script> <title>構造器的宣告週期</title> </head> <body> <h1>構造器的宣告週期</h1> <hr> <div id="app"> {{message}} <p><button @click="jia">加分</button></p> </div> <button onclick="app.$destroy()">銷燬</button> <script type="text/javascript"> var app=new Vue({ el:'#app', data:{ message:1 }, methods:{ jia:function(){ this.message ++; } }, beforeCreate:function(){ console.log('1-beforeCreate 初始化之後'); }, created:function(){ console.log('2-created 建立完成'); }, beforeMount:function(){ console.log('3-beforeMount 掛載之前'); }, mounted:function(){ console.log('4-mounted 被建立'); }, beforeUpdate:function(){ console.log('5-beforeUpdate 資料更新前'); }, updated:function(){ console.log('6-updated 被更新後'); }, activated:function(){ console.log('7-activated'); }, deactivated:function(){ console.log('8-deactivated'); }, beforeDestroy:function(){ console.log('9-beforeDestroy 銷燬之前'); }, destroyed:function(){ console.log('10-destroyed 銷燬之後') } }) </script> </body> </html>