//第一阶段: 创建阶段(挂载组件data数据及内部事件初始化)
// Vue挂载阶段: data数据和内部事件初始化
beforeCreate(){
console.log('创建阶段beforeCreate: 组件即将开始挂载数据')
},
//挂载当前组件的data数据,转get set
//vue初始化内部事件
created(){
// 初始化ajax请求在此处发送!
console.log('创建阶段created: 组件数据/事件挂载完毕')
},
//第二阶段: 挂载阶段(翻译组件template,然后渲染到el容器节点中)
//把template翻译为真实的html节点
beforeMount(){
console.log('挂载阶段beforeMount:组件template已翻译为html,可以开始渲染')
},
//把翻译完的html放入el容器节点中
mounted(){
this.timerid = setInterval(() => {
console.log(1)
}, 100)
console.log('挂载阶段mounted:组件已经渲染完毕,可以开始获取节点并进行操作')
},
//第三阶段:更新阶段(最长的一个生命周期阶段,等待用户交互,发生数据视图改变)
beforeUpdate(){
console.log('更新阶段beforeUpdate:data发生改变,可以开始更新')
},
//重新翻译template,再次进行节点更新
updated(){
console.log('更新阶段updated:页面节点更新完毕!')
},
//第四阶段: 销毁阶段
beforeDestroy(){
console.log('销毁阶段beforeDestroy: 组件即将销毁')
},
//组件回收,释放内存
destroyed(){
//内存泄露: 在不知情情况下,有代码不停在消耗内存
//此函数异常重要,需要在此函数回收所有我们自己创建的东西,释放内存!
console.log('销毁阶段destroyed: 组件销毁完毕')
clearInterval(this.timerid)
}