- 官网上生命周期图示
vue生命周期图
可以看到created的创建执行是在mounted之上的。 - 在created阶段,浏览器渲染整个HTML文档时,dom节点、css规则树与js文件被解析后,还没有进入被浏览器render的过程,尚未挂载在页面上。因为还没有挂载至$el上,所以我们无法获取到对应的节点,但是此时我们是可以获取到vue中***data***与***methods***中的数据的。
- 在mounted阶段,浏览器已经完成了dom与css规则树的render,并完成对render tree进行了布局,对于vue,在mounted阶段vue的template成功挂载在$el中,此时一个完整的页面已经能够显示在浏览器中,在这个阶段,已经可以调用节点
- 遇到的bug
data() {
return {
active: 0,
}},
created(){
this.active= this.$store.state.workSpaceIndex;
},
mounted(){
let _this=this
this.$axios.get('/api/workspace')
.then(res=>{
if(res.status==200){
if(res.data.code==0){
_this.list=res.data.data
_this.listDataInt=res.data.data
_this.active = res.data.data[0].uid;//问题点
_this.firstUid = res.data.data[0].uid;
}
}
});
},
在created中初始化active,等到执行到mounted后又对active进行了赋值,导致active的值不是从created步骤中获取的(不是从vuex中拿到的已经存储好的值),导致获取的值不是需要的已存储在vuex中的值,而是原始的值。所以出错。这个bug的问题点即是生命周期不清楚。
解决办法:在mounted的active赋值上加了一个限定条件,即解决问题
mounted(){
let _this=this;
this.$axios.get('/api/workspace')
.then(res=>{
if(res.status==200){
if(res.data.code==0){
_this.list=res.data.data
_this.listDataInt=res.data.data
//增加限定条件
if(_this.active === 0){
_this.active = res.data.data[0].uid;
}
_this.firstUid = res.data.data[0].uid;
}
}
});
},