uni-app vue3 在APP上获取不到ref返回undefined

uni-app vue3 在APP上获取不到ref返回undefined

信息类别 详情
产品分类 uniapp/App
PC开发环境 Windows
PC版本号 win10
HBuilderX 正式
HBuilderX版本 4.03
手机系统 Android
手机版本号 Android 14
手机厂商 小米
手机机型 小米10
页面类型 vue
vue版本 vue3
打包方式 云端
项目创建方式 HBuilderX

示例代码：

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

const msg_box = ref(null) //消息滚动条获取dom  

function msg_scroll(){
console.log(msg_box.value.scrollTop,msg_box.value.scrollHeight)
}
</script>

<template>
<div ref="msg_box" class="content"></div>
</template>

<style>

</style>

操作步骤：

  • 在安卓app真机运行

预期结果：

  • 可以获取到ref

实际结果：

  • 返回undefined

bug描述：

uniapp vue3 在APP上获取不到ref，返回undefined，在h5端可以，APP不行
发现在h5上把ref绑定到view上也获取不到，div上可以，但是官方文档说h5上可以绑定在view上啊
在App上绑定到div上也获取不到


更多关于uni-app vue3 在APP上获取不到ref返回undefined的实战教程也可以访问 https://www.itying.com/category-93-b0.html

9 回复

参考文档, 非H5端只能用于获取自定义组件，不能用于获取内置组件实例（如：view、text）。

更多关于uni-app vue3 在APP上获取不到ref返回undefined的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个我知道，我没有获取内置组件的，但是也不行获取不到，div算内置组件吗，另外我还自己搞了个组件把ref放在组件上也不行

回复 1***@qq.com: 可以提供个demo

回复 YUANRJ: 就上边那个代码复制运行就行在h5可以，安卓上不行

测试是正常的。

<script setup> import { onMounted, ref } from 'vue' const msg_box = ref(null) onMounted(() => { console.log(msg_box.value) }) </script> <template>
</template>

请看下边视频，我这不行，同样的代码

不行请看视频，难道是我手机的问题吗？
https://img.zhuayuya.com/video1.mp4 https://img.zhuayuya.com/video2.mp4

从你发的视频看，其实已经获取到了，数据只是被序列化了，你可以打开控制台右上角 调试 功能查看信息。另外app端的获取到的dom不是标准的，如果你想获取标准dom，可以采用renderjs的方式。更推荐使用uni-app内置的uni.createSelectorQuery()来获取节点信息。

在 uni-app 中使用 Vue 3 时，如果 ref 返回 undefined，通常是因为组件或元素尚未挂载或渲染完成。以下是一些可能的原因和解决方法：

1. 确保 ref 已正确绑定

首先，确保你在模板中正确地绑定了 ref。

<template>
  <div ref="myRef">Hello World</div>
</template>

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

const myRef = ref(null);

onMounted(() => {
  console.log(myRef.value); // 应该在组件挂载后输出 DOM 元素
});
</script>

2. 检查生命周期钩子

确保你在 onMounted 钩子中访问 ref，因为此时 DOM 元素已经挂载完成。

import { ref, onMounted } from 'vue';

const myRef = ref(null);

onMounted(() => {
  console.log(myRef.value); // 应该在组件挂载后输出 DOM 元素
});

3. 异步问题

如果你的组件或元素是异步加载的，可能需要在它们加载完成后再访问 ref。你可以使用 nextTick 来确保 DOM 更新完成后再访问 ref。

import { ref, nextTick } from 'vue';

const myRef = ref(null);

nextTick(() => {
  console.log(myRef.value); // 确保 DOM 更新完成后再访问 ref
});

4. 动态组件或条件渲染

如果你的 ref 是动态生成的或条件渲染的，确保在 ref 存在后再访问它。

<template>
  <div v-if="isVisible" ref="myRef">Hello World</div>
</template>

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

const myRef = ref(null);
const isVisible = ref(false);

watch(isVisible, (newVal) => {
  if (newVal) {
    console.log(myRef.value); // 确保在元素渲染后再访问 ref
  }
});

setTimeout(() => {
  isVisible.value = true; // 模拟条件渲染
}, 1000);
</script>

5. ref 绑定到子组件

如果你将 ref 绑定到子组件，确保子组件已经挂载完成。

<template>
  <ChildComponent ref="childRef" />
</template>

<script setup>
import { ref, onMounted } from 'vue';
import ChildComponent from './ChildComponent.vue';

const childRef = ref(null);

onMounted(() => {
  console.log(childRef.value); // 确保子组件挂载完成后再访问 ref
});
</script>

6. uni-app 特定问题

在某些情况下，uni-app 的渲染机制可能与标准的 Vue 3 有所不同。如果你在 APP 上遇到问题，可以尝试在 mounted 钩子中延迟访问 ref，或者使用 nextTick 确保 DOM 更新完成。

import { ref, onMounted, nextTick } from 'vue';

const myRef = ref(null);

onMounted(() => {
  nextTick(() => {
    console.log(myRef.value); // 确保 DOM 更新完成后再访问 ref
  });
});
回到顶部