子应用中在动态修改图片的地址导致图片频繁切换

[SepVeneto]

问题描述

通过new Image和appendChild添加图片，当图片地址会动态修改时会出现dom上频繁添加删除的现象。但是当子应用独立运行的时候就没有这个问题

<template>
  <div ref="imgRef"></div>
</template>

<script setup lang="ts">
import { onMounted, ref, shallowRef, watch } from 'vue'

const imgRef = ref()

const props = defineProps({
  src: {
    type: String,
    required: true,
  },
})

onMounted(() => {
  loadImage()
})
watch(() => props.src, () => {
  loadImage()
})
const _img = shallowRef()
function loadImage() {
  const img = new Image()

  img.onload = () => {
    if (_img.value) {
      _img.value.remove()
    }
    _img.value = img
    imgRef.value.appendChild(img)
  }
  img.src = props.src
}
</script>

复现步骤

克隆复现仓库

pnpm i
cd packages/base
pnpm dev

cd packages/micro
pnpm dev

访问http://localhost:8987

观察到最下方的图标会频繁在vue.svg和vite.svg中切换

直接访问子应用http://localhost:8988

观察到最下方的图标初始为vite.svg，0.3s后切换为vue.svg

上传截图

复现仓库

microapp-demo

环境信息

• micro-app版本：1.0.0-rc.5
• 主应用前端框架&版本：vue&3.4.27
• 子应用前端框架&版本：vue&3.4.27
• 构建工具&版本：vite&5.2.11