对于每一个生命阶段,vue提供了一些特定的方法:
这一阶段进行完毕,其对应的方法就会被执行。
比如:
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><link rel="stylesheet" type="text/css" href="css/base.css"/><style type="text/css">#app{width: 20%;margin: 200px auto;border: 1px solid #ccc;line-height: 40px;padding: 20px;}</style></head><body><div id="app"><div class="box"><div>{{msg}}</div><button @click="update">更新</button><button @click="destroy">销毁</button></div></div><script type="text/javascript" src="./js/vue.min.js"></script><script type="text/javascript">var vm=new Vue({el: "#app",data:{msg:"生命周期"},methods:{update:function(){this.msg="hello"},destroy:function(){//销毁需要使用这个方法,销毁vue实例对象this.$destroy()}},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')},beforeDestroy:function(){console.log('beforeDestroy')},destroyed:function(){console.log('destroyed')}})</script></body></html>
这些方法又被称为生命周期钩子函数。
更加详细的介绍可以查看官网:/v2/guide/custom-directive.html#ad