vue 生命周期,发现实测,请求该放在何处

131 阅读2分钟

本篇只做讨论记录,请求问题。挂载前、挂载后和keepAlive,四个周期不在测试内。

  created(){
    console.log('有吗?created :>> ', );
  },
  mounted() {
    console.log('有吗? mounted:>> ', );
  },
  beforeUpdate (){
    console.log('有吗? beforeMount:>>更新前 ', );
  },
  updated(){
    console.log('有吗? updated:>>更新后 ', );
  },
  beforeDestroy(){
    console.log('有吗? beforeDestroy:>>销毁前 ', );
  },
  destroyed(){
    console.log('有吗? destroyed:>>销毁后 ', );
  }

初次进入页面,正常执行。创建前后-挂载前后生命周期。 image.png

如果在页面切换时 image.png

率先执行的,是新页面的创建,之后是前一个页面的销毁前后,最后才是新页面的挂载后。

现在来说一说,我们的请求应该放到哪个生命周期中才最为合适。 created?和mounted

这两个回答,前者是数据已经准备好了,后者是连dom也已经加载完成了。

两个都是可以的,根据图片就能看出mounted会更好

一句话解释: created性能提升并不大,同时要避免有可能,渲染和处理返回数据冲突

另: 如果是服务端渲染,我们将其放入created中进行,因为服务端不支持mounted

几句话详解: created它确实是早了,但对于性能提升并不大

其次,我们在created阶段并没有去做渲染,所以在接下来我们会去做Dom渲染,但是如果此时我们还做了Ajax操作,在Ajax结束之后就会返回数据,我们就会将其插入到主线程中去运行,去处理数据

在浏览器机制中,渲染线程跟js线程是互斥的

所以有可能我们做渲染的同时,另一边可能要处理Ajax返回的数据了,这时候渲染就有可能被打断

如果在created中有多个Ajax呢?我们又要重新进行渲染,所以在created去做Ajax请求这明显不太合适

我们接到返回的数据的时候可能要在回调函数中去进行一些Dom的操作,可是created阶段我们还没有将真实Dom加载出来,所以相对而言我们还是在mounted去调用要好一些