最近一直是在用Vue做项目 , 所以了解生命周期对于了解vue十分重要 :
官方给出对vue生命周期的解释 :
即便官方给的再详细 , but we need have a try ! : )
<template>
<div>
<div >{{a}}</div>
<button @click="counter += 1">{{counter}}</button>
</div>
</template>
<script>
export default {
data() {
return {
a: "Vue.js",
counter:1
}
},
methode:{
change(){
this.a = 'vue'
}
},
beforeCreate: function () {
console.log("创建前")
console.log(this.a)
console.log(this.$el)
},
created: function () {
console.log("创建之后");
console.log(this.a)
console.log(this.$el)
},
beforeMount: function () {
console.log("mount之前")
console.log(this.a)
console.log(this.$el)
},
mounted: function () {
console.log("mount之后")
console.log(this.a)
console.log(this.$el)
},
beforeUpdate: function () {
console.log("更新前");
console.log(this.a)
console.log(this.$el)
},
updated: function () {
console.log("更新完成");
console.log(this.a);
console.log(this.$el)
},
beforeDestroy: function () {
console.log("销毁前");
console.log(this.a)
console.log(this.$el)
console.log(this.$el)
},
destroyed: function () {
console.log("已销毁");
console.log(this.a)
console.log(this.$el)
}
}
</script>
结果 :
原文发布时间为：2018年02月10日
原文作者：葉子君
本文来源：开源中国 如需转载请联系原作者
