[Bug]: insertBefore和removeChild会导致其他元素重新渲染

[zgliubo]

请先搜索是否存在类似提交

• 我确定这个提交不是重复的

相关平台

• 所有小程序
• 微信小程序
• 支付宝小程序
• 百度小程序
• 字节跳动小程序
• QQ 轻应用
• 京东小程序
• 快应用平台（QuickApp）
• Web 平台（H5）
• 移动端（React-Native）
• 鸿蒙（harmony）

小程序基础库版本

3.8.5

使用框架

Vue 3

问题描述

<template>
  <view ref="parent">
    <image style="height: 100px" mode="heightFix" :src="img" />

    <view @tap="testClick" style="padding: 10px; margin: 10px;background-color: antiquewhite;text-align: center;">
      Test Click
    </view>

    <view v-if="visible" ref="myChildView">child</view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const img = "data:image/svg+xml;base64,PHN2ZyB0PSIxNzQ0MDkzNjY1MTcxIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjI2MjMiIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj48cGF0aCBkPSJNNjMxLjA0IDE2MS45NDEzMzNhNDIuNjY2NjY3IDQyLjY2NjY2NyAwIDAgMSA2My4wNjEzMzMgNTcuMzg2NjY3bC0yLjQ3NDY2NiAyLjczMDY2Ny0yODkuOTYyNjY3IDI5Mi4yNDUzMzMgMjg5LjcwNjY2NyAyODcuNDAyNjY3YTQyLjY2NjY2NyA0Mi42NjY2NjcgMCAwIDEgMi43MzA2NjYgNTcuNmwtMi40NzQ2NjYgMi43NTJhNDIuNjY2NjY3IDQyLjY2NjY2NyAwIDAgMS01Ny42IDIuNzA5MzMzbC0yLjc1Mi0yLjQ3NDY2Ny0zMjAtMzE3LjQ0YTQyLjY2NjY2NyA0Mi42NjY2NjcgMCAwIDEtMi43MDkzMzQtNTcuNmwyLjQ3NDY2Ny0yLjc1MiAzMjAtMzIyLjU2eiIgZmlsbD0iIzExMTExMSIgcC1pZD0iMjYyNCI+PC9wYXRoPjwvc3ZnPg=="

const visible = ref(true);

const parent = ref();
const myChildView = ref();

function testClick() {
  // visible.value = !visible.value;  // v-if也会导致其他元素重新渲染

  // parent.value.removeChild(myChildView.value);  // removeChild也会导致其他元素重新渲染

  parent.value.insertBefore(document.createTextNode('123'), myChildView.value);
}

</script>

复现链接

--

复现步骤

点击[Test Click], 两次会界面会重新渲染(图片闪烁)

环境信息

👽 Taro v4.1.1


  Taro CLI 4.1.1 environment info:
    System:
      OS: Windows 11 10.0.26120
    Binaries:
      Node: 22.14.0 - C:\Program Files\nodejs\node.EXE
      npm: 10.9.2 - C:\Program Files\nodejs\npm.CMD
    npmPackages:
      @tarojs/cli: 4.1.1 => 4.1.1 
      @tarojs/components: 4.1.1 => 4.1.1 
      @tarojs/helper: 4.1.1 => 4.1.1 
      @tarojs/plugin-framework-vue3: 4.1.1 => 4.1.1 
      @tarojs/plugin-platform-weapp: 4.1.1 => 4.1.1 
      @tarojs/runtime: 4.1.1 => 4.1.1 
      @tarojs/shared: 4.1.1 => 4.1.1 
      @tarojs/taro: 4.1.1 => 4.1.1 
      @tarojs/taro-loader: 4.1.1 => 4.1.1 
      @tarojs/webpack5-runner: 4.1.1 => 4.1.1 
      babel-preset-taro: 4.1.1 => 4.1.1 
      eslint-config-taro: 4.1.1 => 4.1.1

贡献代码

• 我愿意修复这个错误

[SnowHot]

4.x版本dom解析有问题，

定位问题在这，这样写就是报错的白屏