beforeCreate(){ // 刚刚new Vue()之后,这个时候,数据还没有挂载,只是一个空壳,可以在这加个loading
console.log('创建前')
console.log('el:' + this.$el) // undefined
console.log('el:' + this.$data) // undefined
}
created(){ // 这个时候已经可以使用data中的数据,也可以更改数据,在这里不会触发updated函数,在这结束loading
console.log('创建完毕')
console.log('el:' + this.$el) // undefined
console.log('el:' + this.$data) // 已被初始化
}
beforeMount(){ // 虚拟dom已经创建完成,马上就要渲染,在这里也可以更改数据,不会触发updated函数
console.log('挂载前')
console.log('el:' + this.$el) // 已被初始化
console.log('el:' + this.$data) // 已被初始化
}
mounted(){ // 此时,组件已经出现在页面中,数据、dom都已经处理好了,事件都已经挂载好了,在这发起后端请求
console.log('挂载结束')
console.log('el:' + this.$el) // 已被初始化
console.log('el:' + this.$data) // 已被初始化
}
beforeUpdate(){
console.log('更新前')
}
updated(){
console.log('更新完成')
}
beforeDestroy(){ // 销毁前执行
console.log('销毁前')
}
destroyed(){ // 组件的数据绑定,监听...都会去掉,只剩下dom空壳
console.log('销毁完成')
}