环境:Vue2.x版本
在Vue的官网有一张图已经很好的诠释了生命周期,我在这里就不再多讲了,直接贴图,然后上程序代码。
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<div id="app">
{{count}}
<p><button @click="add">加分</button></p>
</div>
<button onclick="app.$destroy()">销毁</button>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
count:1
},
methods:{
add:function(){
this.count ++;
}
},
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>
activated
keep-alive组件激活时调用。
该钩子在服务器端渲染期间不被调用。
deactivated
keep-alive组件停用时调用。
该钩子在服务端渲染期间不被调用。