为什么这个图像在点击按钮时发出 2 个网络请求？

Question

我在 Vue3 应用程序中使用基于 Web 的开源查看器。在用户单击“打开图像”按钮之前，图像不会显示。效果很好。

但是，有谁知道为什么单击“打开图像”按钮时同一张图像发出两个网络请求？

这是我的最小复制品：

沙箱：https://stackblitz.com/edit/vitejs-vite-xxxk9w?file=src/App.vue

App.vue

：

<script setup>
import { ref } from 'vue';
import Viewer from './components/Viewer.vue';
const show = ref(false);
</script>

<template>
  <div>
    <button type="button" @click="show = true">Open Image</button>
    <Viewer v-if="show" />
  </div>
</template>

Viewer.vue

：

<template>
  <div ref="osdContainer" style="width: 500px; height: 500px"></div>
</template>

<script setup>
import OpenSeadragon from 'openseadragon';
import { ref, onMounted } from 'vue';
const viewer = ref(null);
const osdContainer = ref(null);

const initViewer = () => {
  console.log('init Viewer');
  viewer.value = OpenSeadragon({
    element: osdContainer.value,
    tileSources: {
      type: 'image',
      url: 'https://ik.imagekit.io/pixstery/users%2F5cnu6iDlTsa5mujH2sKPsBJ8OKH2%2Fposts%2Fportrait-of-arabian-man_jjC2?alt=media&token=64fb0ae4-b0dc-4ead-b22e-292e55de1447&tr=f-auto,pr-true,q-80',
      buildPyramid: false,
    },
  });
};

onMounted(() => {
  console.log('mounting..');
  initViewer();
});
</script>

Answer 1

点击“打开图片”按钮时同一张图片发出两次网络请求的原因是每次挂载或重新渲染

viewer.vue

组件时都会调用initViewer()函数

看看点击“打开图像”按钮时会发生什么，

1. Viewer组件被渲染和挂载
2. 它触发

   onMounted

   钩子并调用

   initViewer()

   函数。
3. 然后它发送第一个网络请求来加载图像。然后，当 show 值变为 false 时（例如，当组件被卸载或重新渲染时），Viewer 组件被销毁，然后当 show 值变回 true 时重新渲染，触发

   initViewer()

   再次运行并引起另一个网络请求加载图像

为避免这种情况，您可以修改代码以仅调用一次 initViewer 函数，方法是添加一个 isViewerInitialized ref 变量来跟踪查看器是否已初始化，并在调用 initViewer 之前检查其值：

<script setup>
import OpenSeadragon from 'openseadragon';
import { ref, onMounted } from 'vue';

const viewer = ref(null);
const osdContainer = ref(null);
const isViewerInitialized = ref(false);

const initViewer = () => {
  console.log('init Viewer');
  viewer.value = OpenSeadragon({
    element: osdContainer.value,
    tileSources: {
      type: 'image',
      url: 'https://ik.imagekit.io/pixstery/users%2F5cnu6iDlTsa5mujH2sKPsBJ8OKH2%2Fposts%2Fportrait-of-arabian-man_jjC2?alt=media&token=64fb0ae4-b0dc-4ead-b22e-292e55de1447&tr=f-auto,pr-true,q-80',
      buildPyramid: false,
    },
  });
  isViewerInitialized.value = true;
};

onMounted(() => {
  console.log('mounting..');
  if (!isViewerInitialized.value) {
    initViewer();
  }
});
</script>