vue组件生命周期
最后更新于：2022-04-02 05:34:34
[TOC]
## 前言
如果你想对vue有比较好的使用和进一步拓展，那么vue组件的生命周期是必须清楚的。其中生命周期的钩子函数就是给你一些不同周期阶段的回调函数而已。
## 图解生命周期
## 代码各个阶段
~~~
var myVue=new Vue({
el:"#app-8",
data:{
data:"aaaaa",
info:"nono"
},
//数据没有 元素没有
beforeCreate:function(){
console.log("创建前========")
console.log(this.data)
console.log(this.$el)
},
//数据有 元素没有
created:function(){
console.log("已创建========")
console.log(this.info)
console.log(this.$el)
},
//数据有 元素有 虚拟dom
beforeMount:function(){
console.log("mount之前========")
console.log(this.info)
console.log(this.$el)
},
//数据有 元素有，真实dom
mounted:function(){
console.log("mounted========")
console.log(this.info)
console.log(this.$el)
},
beforeUpdate:function(){
console.log("更新前========");
},
updated:function(){
console.log("更新完成========");
},
beforeDestroy:function(){
console.log("销毁前========")
console.log(this.info)
console.log(this.$el)
},
destroyed:function(){
console.log("已销毁========")
console.log(this.info)
console.log(this.$el)
}
})
~~~
## 使用建议
* beforeCreate :加载loading事件
* created :结束loading，还做一些初始化，实现函数自执行
* mounted :在这发起axios请求，拿回数据，配合路由钩子做一些事情
* beforeDestory： destoryed :当前组件已被删除，清空相关内容
综上：建议你吧页面进入出现加载框写在beforeCreate,请求接口数据写在created,
';