Vue Ajax 请求到底应该放在 created 里还是 mounted 里

2022-02-23 23:33:02 阅读：370 来源： 互联网

标签：Vue console log created Ajax API mounted 请求

1 先放在 created 里

首先我们先将请求放在 created 里，如下：

created(){
  console.log('created');
  this.$store.dispatch('getDetail', 11);
},
mounted(){
  console.log('mounted');
}

这个时候，我们是能够成功发送 API 请求获取到数据的，控制台会打印 created，mounted。

2 再放在 mounted 里

然后我们先将请求放在 mounted 里，如下：

created(){
  console.log('created');
},
mounted(){
  console.log('mounted');
  this.$store.dispatch('getDetail', 11);
}

这个时候，也能够成功发送 API 请求获取到数据的，并且控制台也会打印 created，mounted。

3 分析在 created 里的情况

在进行深入分析之前，我们首先要知道一点：created 和 mounted 都是同步的，API请求是异步的。
我们可以来分析一下下面的这段代码：

<template>
  <div>
	//用于触发updated函数
    <div @click="b++">{{ b }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      b: 0
    };
  },
  computed: {
    ajaxData() {
      return this.$store.state.Detail.detailInfo;
    }
  },
  created() {
    console.log('created');
    this.$store.dispatch('getDetail', 11);
  },
  mounted() {
    console.log('mounted');
    console.log(this.ajaxData);
    console.log('mounted2');
  },
  updated() {
    console.log(this.ajaxData);
    console.log('updated');
  },


created
mounted
{__ob__: Observer}//空{}
mounted2
//点击div触发updated钩子函数
{…}
updated

1 在这里，首先会打印 created。

2 然后执行到this.$store.dispatch('getDetail', 11) 的时候，会发送 API 请求出去。注意，仅仅是发送了请求，请求并没有完成。这里可以类比 setTimeout，当我们 setTimeout(fn, 1000) 的时候，定时器 timer 会马上设置，但是 fn 并不会马上执行，而是 1 s 以后才可能执行。

3 然后，我们打印 mounted

4 此时打印ajaxData，是空字符串，也就是 API 请求数据还没回来。

5 之后打印mounted2

6 最后，当 mounted 也执行完了，所有同步代码执行完毕，请求的回调函数才会执行，最终将 this.$store.state.Detail.detailInfo赋值给 ajaxData 数据，并且触发 uptate(这个update不是我们写的钩子函数)，重新渲染组件

7 //点击div触发updated钩子函数, 可以看到{…}updated, 异步函数确实执行完毕了.

4 总结一下，如果将 API 请求放到 created 里的话，实际上是这样一个过程：

也就是说，再发送 API 请求以后，就会产生 2 个分支，代码逻辑比较混乱。

5 再来分析 mounted 里的情况

可以看到整个逻辑是这样的：
created => mounted => mounte组件首次渲染 => API请求 => 获取到数据 => update组件重新渲染

可以看到，没有分支，只有一个流程。

标签：Vue,console,log,created,Ajax,API,mounted,请求
来源： https://www.cnblogs.com/boji/p/15929721.html