uni-app在vue3+微信小程序中，子组件中的所有id都被加上了随机前缀，导致根据id获取节点信息失效

示例代码：

<template>  
    <view class="container">  
        <List />  
    </view>  
</template>  

<script setup>  
    import List from "./list.vue"  
</script>

<template>  
  <view class="content">  
    <view id="test">  
      321321  
    </view>  
  </view>  
</template>

操作步骤：

运行demo到小程序，检查元素查看id值

预期结果：

id值应该为test

实际结果：

id值为bf98b38f--test，前面bf98b38f每次加载都不同

bug描述：

在vue3+微信小程序中，子组件中的所有id都被加上了随机前缀，导致根据id获取节点信息失效

附件

更多关于uni-app在vue3+微信小程序中，子组件中的所有id都被加上了随机前缀，导致根据id获取节点信息失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

sinazl 1楼

测试了一下原生微信小程序也是这样的，子组件的id前面带有随机的hash值，见第一张附件图片。
另一个问题，拿不到节点，用你的demo并没复现你说的问题，测试结果见附件第二张图

yibo5220 2楼

随机id前缀确实不影响获取节点信息，是我自身问题导致，谢谢大佬~

eggper 3楼

这是uni-app在Vue3+微信小程序环境下的正常行为。由于Vue3的组件作用域隔离机制，uni-app会自动为组件内的id添加随机前缀以保证作用域隔离。

解决方案：

使用ref替代id获取节点：

<view ref="testRef"></view>

const testRef = ref(null)
onMounted(()=>{
  uni.createSelectorQuery().select(`#${testRef.value.$el.id}`)...
})

使用class选择器代替id选择器：

<view class="test-class"></view>

uni.createSelectorQuery().select('.test-class')...

如果需要保持id不变，可以使用data-id：

<view data-id="test"></view>

uni.createSelectorQuery().select('[data-id="test"]')...