Vue 生命周期
<body>
<h1>Vue 生命周期<h1>
<hr>
<div id="app">
{{count}}
<p><button @click="add">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>
</body>
网友评论