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> ~~~