Vue的生命周期（鉤子函數) · web前端

[TOC] # 簡介 Vue一共有10個生命周期函數，我們可以利用這些函數在vue的每個階段都進行操作數據或者改變內容。其實在Vue的官網有一張圖已經很好的詮釋了生命周期，我在這里就不再多講了，直接貼圖，然后上程序代碼 ![](https://box.kancloud.cn/39a1c88b7877846cac99911e8b9f0552_1200x2800.png) 代碼 ~~~ <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> ~~~