在
Vue 3中使用`ref`
获取不到页面元素，可能有以下原因：
### 初始值为 null
使用`ref`创建的引用初始值为`null`，只有在组件
渲染后才会有值。例如：
```
vue
<template>
<div ref="myDiv">这是一个div</div>
</template>
<script setup>
import { ref } from &#
39;
vue&#
39;;
const myDiv = ref(null);
console.log(myDiv.value); // 这里会输出 null，因为组件还未
渲染
</script>
```
因此，在组件未
渲染完成时访问`ref`的值，就会
获取不到元素，需要在组件
渲染完成后再访问，如在`mounted`或之后的生命周期钩子中访问 DOM
元素[^
3]。
### 访问时机不当
只能在`mounted`或之后的生命周期钩子中访问 DOM
元素。如果在`created`生命周期钩子中访问`ref`，由于此时组件还未挂载，
元素还未
渲染，就无法
获取到
元素。例如：
```
vue
<template>
<div ref="myDiv">这是一个div</div>
</template>
<script setup>
import { ref, onCreated, onMounted } from &#
39;
vue&#
39;;
const myDiv = ref(null);
onCreated(() => {
console.log(myDiv.value); // 这里会输出 null
});
onMounted(() => {
console.log(myDiv.value); // 这里可以
获取到正确的
元素
});
</script>
```
所以要注意访问`ref`值的时机，避免在
元素未
渲染时访问[^
3]。
### 手动访问问题
在模板中使用时，
Vue 会自动解包`.value`，但在 JavaScript 中需要手动访问。如果忘记使用`.value`，就无法正确
获取元素。例如：
```
vue
<template>
<div ref="myDiv">这是一个div</div>
<button @click="handleClick">点击</button>
</template>
<script setup>
import { ref } from &#
39;
vue&#
39;;
const myDiv = ref(null);
const handleClick = () => {
// 错误示例：没有使用 .value
// console.log(myDiv);
// 正确示例
console.log(myDiv.value);
};
</script>
```
因此，在 JavaScript 代码中访问`ref`引用的
元素时，要记得使用`.value`来
获取元素[^
3]。
### 子组件暴露问题
如果是在父组件中通过`ref`访问子组件的
元素或方法，子组件需要使用`defineExpose`来暴露属性或方法给父组件访问。如果子组件没有暴露，父组件就无法
获取到子组件的相关内容。例如：
```
vue
<!-- 子组件 -->
<template>
<div>子组件内容</div>
</template>
<script setup>
import { ref } from &#
39;
vue&#
39;;
const childRef = ref(null);
// 暴露 childRef
defineExpose({
childRef
});
</script>
<!-- 父组件 -->
<template>
<ChildComponent ref="childComp" />
<button @click="handleClick">点击</button>
</template>
<script setup>
import { ref, onMounted } from &#
39;
vue&#
39;;
import ChildComponent from &#
39;./ChildComponent.
vue&#
39;;
const childComp = ref(null);
const handleClick = () => {
onMounted(() => {
console.log(childComp.value.childRef); // 可以
获取到子组件暴露的 ref
});
};
</script>
```
若子组件未使用`defineExpose`暴露，父组件将无法
获取子组件的`ref`值。
本文解决了在Vue项目中遇到的一个常见问题：虽然已成功从后台接口获取数据并分配给全局变量，但在尝试获取这些元素时却得到空数组。文章详细介绍了问题的背景及解决步骤，并强调了使用this.$nextTick()的重要性。
扫一扫
1523
到【灌水乐园】发言
