Vue中需在API加载图片后执行函数，Mounted钩子是否适用？

首先直接给结论：mounted 并不是完成这个任务的正确生命周期钩子。原因很简单：mounted 钩子的触发时机是Vue实例挂载到DOM完成，但你的API请求是异步操作，它的完成时间完全独立于Vue的生命周期——有可能在mounted之前完成，也可能在之后，而你的场景里刚好是API请求还没返回数据，mounted就已经执行了TiffParser.replaceIMG()，自然没法处理还没加载好的图片数据。

正确的处理方式有两种，根据你的需求选择： #

1. 直接在API请求的then回调中执行函数

这是最直接的方案，因为我们能明确知道数据什么时候准备好：

created: function() {
  apiService
    .getImages(this.$route.params.id)
    .catch(error => {
      console.log(error);
      this.errored = true;
    })
    .then(response => {
      this.loading = false;
      this.images = response.data;
      // 数据已经赋值完成，现在执行替换操作
      TiffParser.replaceIMG();
    });
},
// 这里可以移除mounted里的调用

这种方式能确保TiffParser.replaceIMG()只有在图片数据完全加载并赋值给this.images之后才会运行，从根源上避免了异步时序问题。

2. 通过watch监听images的变化

如果你的images数据后续还有可能被更新（比如用户操作重新加载图片），用watch监听会更灵活：

created: function() {
  apiService
    .getImages(this.$route.params.id)
    .catch(error => {
      console.log(error);
      this.errored = true;
    })
    .then(response => {
      this.loading = false;
      this.images = response.data;
    });
},
watch: {
  images: {
    handler(newVal) {
      // 确保数据不为空时才执行
      if (newVal) {
        TiffParser.replaceIMG();
      }
    },
    // 如果需要在组件初始化时就检查一次（比如images初始值可能不是null的情况），可以加这个选项
    // immediate: true
  }
}

这种方式会在this.images每次发生变化时自动触发替换操作，适合数据有动态更新的场景。

补充说明 #

Vue的生命周期钩子主要是围绕实例和DOM的初始化设计的，不能依赖它们来等待异步数据请求完成——异步请求的时序是不确定的，必须通过回调、Promise链式调用或者监听数据变化的方式来处理后续逻辑。

内容的提问来源于stack exchange，提问作者redshift