【VueJS】Vue的生命周期(钩子函数)
环境: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><
·
环境: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组件停用时调用。
该钩子在服务端渲染期间不被调用。
更多推荐
已为社区贡献7条内容
所有评论(0)