創建期:
beforeCreate:創建前回調
created:對象創建完成的時候回調。
掛載期:
beforeMount:
mounted:頁面顯示完成的時候回調
更新期:
beforeUpdate:
update:頁面更新完成後回調
銷燬期:
beforeDestroy:
destoryed:viewnode從內存銷燬完成後回調
<body>
<div id="app">
<h1>{{num}}</h1>
<input type="button" value="+" @click="update" />
<input type="button" value="destory vm" @click="destroyVM">
</div>
<script src="bower_components/vue/dist/vue.js"></script>
<script>
(function () {
new Vue({
el:"#app",
data:{
num:0
},
methods:{
update(){
this.num++
},
destroyVM(){
//this.$mount()
this.$destroy()
}
},
beforeCreate(){
console.log("#1 beforeCreate")
},
created(){
console.log("#2 created")
},
beforeMount(){
console.log("#3 beforeMount")
},
//dom 生成 vnode->dom - el ready
mounted(){
console.log("#4 mounted")
},
beforeUpdate(){
console.log("#5 beforeUpdate")
},
updated(){
console.log("#6 updated")
},
beforeDestroy(){
console.log("#7 beforeDestroy")
},
destroyed(){
console.log("#8 destroyed")
}
})
})()
</script>
</body>