Vue实例有一个完整的生命周期,也就是从开始创建初女台化数据、编译模板、挂载DOM、渲染一更新一渲染、卸载等一系列过程,我们称这是Vue的生命周期。
在Vue官网有这样一张图
<template>
<div>
<p>{{message}}</p>
<button @click="changeMsg">改变</button>
</div>
</template>
<script>
export default {
data() {
return {
message: 'hello world'
}
},
methods: {
changeMsg () {
this.message = 'goodbye world'
}
},
beforeCreate() {
console.log('------初始化前------')
console.log(this.message)//undefined
console.log(this.$el);//undefined
},
created () {
console.log('------初始化完成------')
console.log(this.message)//hello world
console.log(this.$el);//undefined
},
beforeMount () {
console.log('------挂载前---------')
console.log(this.message)//hello world
console.log(this.$el);//undefined
},
mounted () {
console.log('------挂载完成---------')
console.log(this.message)//hello world
console.log(this.$el);
// <div>
// <p>hello world</p>
// <button @click="changeMsg">改变</button>
// </div>
},
beforeUpdate () {
console.log('------更新前---------')
console.log(this.message)//goodbye world
console.log(this.$el);
// <div>
// <p>goodbye world</p>
// <button @click="changeMsg">改变</button>
// </div>
},
updated() {
console.log('------更新后---------')
console.log(this.message)//goodbye world
console.log(this.$el);
// <div>
// <p>goodbye world</p>
// <button @click="changeMsg">改变</button>
// </div>
},
beforeDestroy() {
console.log('------销毁前---------');
console.log(this.message);
console.log(this.$el);
},
destroy() {
console.log('------销毁后---------');
console.log(this.message);
console.log(this.$el);
}
}
</script>
<style lang="less">
</style>