window.onload怎么在vue使用

在Vue.js中，`window.onload`事件并不直接可用，因为Vue是基于数据驱动和组件化的框架，它有自己的生命周期钩子来处理DOM加载完成后的操作。你可以使用`mounted`生命周期钩子函数来达到类似的效果。

<template>
  <div>
    <img :src="loadingImage" v-if="!isLoaded">
  </div>
</template>

<script>
export default {
  data() {
    return {
      loadingImage: 'loading-image-url.jpg', // 加载中的默认图片URL
      isLoaded: false,
    };
  },
  mounted() {
    this.$nextTick(() => {
      // 当组件已挂载到DOM并且渲染完毕后，调用异步方法获取实际图片url，或者设置其他初始化逻辑
      // 假设我们从API获取图片url
      axios.get('/api/image')
        .then(response => {
          this.loadingImage = response.data.url;
          this.isLoaded = true; // 标记图片已经加载完成
        })
        .catch(error => {
          console.error('Failed to load image:', error);
        });
    });
  },
};
</script>

在这个例子中，`mounted`钩子会在组件挂载到DOM后立即执行，但需要等到下一次微任务执行（即`$nextTick`）之后，确保DOM已经被更新。此时你可以进行实际的图片加载操作。