1***@qq.com
1***@qq.com
  • 发布:2024-03-26 12:00
  • 更新:2024-03-26 17:57
  • 阅读:131

【报Bug】Vite+Vue3抖音小程序组件使用v-if引发的BUG

分类:uni-app

产品分类: uniapp/小程序/字节跳动

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: Windows 10 专业版 22H2

第三方开发者工具版本号: 4.2.1

基础库版本号: 3.16.0.0

项目创建方式: CLI

CLI版本号: 3.0.0-3081220230817001

示例代码:

页面代码:

<template>  
  <view>  
    <PopupNew :show="showPopup">  
      <view>Ni Hao</view>  
    </PopupNew>  
    <button @click="showPopup = !showPopup">切换</button>  
  </view>  
</template>  

<script setup lang="ts">  
import { ref } from 'vue';  
import PopupNew from '@/components/PopupNew.vue';  

const showPopup = ref(false);  
</script>

子组件代码:

<template>  
  <view v-if="show" key="1">  
    <slot />  
  </view>  
</template>  

<script setup lang="ts">  
defineProps({  
  show: { type: Boolean, default: false }  
});  
</script>

操作步骤:

进入如上代码页面, 点击切换按钮, 对子组件进行一轮可见度切换, 由隐藏切换为可见, 再由可见切换为隐藏, 最后再切换到显示状态, 此时观察抖音开发者工具的调试器的Elements, 会发现子组件的v-if所在view, 重复的挂载了一个, 这样在不断的可见度切换后, 会创建很多很多的view元素

预期结果:

毫无疑问, 在v-if 的条件为false时, 应该完全卸载v-if所在的dom元素才是, 再重新可见后重新挂载dom元素

实际结果:

然而目前的情况是v-if条件为false, 其所在dom并未被销毁

bug描述:

在打包成抖音小程序后, 通关开发者工具的调试器发现, 子组件通过v-if切换显示的情况下, 反复的切换可见度, 会导致组件内的dom元素重复的创建, 在一轮可见切换后, 总会多出一个dom元素

2024-03-26 12:00 负责人:无 分享
已邀请:
DCloud_UNI_HRK

DCloud_UNI_HRK

感谢反馈,已复现该问题
暂时直接在父组件那里直接使用v-if解决

<PopupNew v-if="showPopup">  
    <template>  
        <view>Ni Hao</view>  
    </template>  
</PopupNew>
  • 1***@qq.com (作者)

    感谢跟踪, 期待修复!

    2024-03-26 16:33

DCloud_UNI_HRK

DCloud_UNI_HRK

进一步排查,发现是抖音小程序官方那边的问题,用原生抖音小程序语言在自定义组件里面使用的tt:if时,组件不会自动销毁,需要去抖音小程序官方社区进行反馈

要回复问题请先登录注册