Vue组件多div场景下template ref返回undefined问题

嘿，我之前也碰到过一模一样的情况！咱们来拆解一下可能的原因和对应的解决办法：

1. 条件渲染/循环影响了ref元素的渲染时机 #

这是最常见的原因——当你新增元素后，可能不小心让带ref的元素处于条件渲染（比如v-if）或者**v-for循环**里了。Vue的mounted钩子触发时，只是父组件挂载完成，但如果子元素依赖条件渲染，可能此时还没被渲染到DOM里，所以ref就会返回undefined。

举个例子，比如你新增元素后给原来的ref元素加了v-if：

<template>
  <div v-if="isShow" ref="targetEl">原来的内容</div>
  <div>新增的div</div> <!-- 新增的元素 -->
</template>

<script>
export default {
  data() {
    return {
      isShow: false
    }
  },
  mounted() {
    this.isShow = true;
    console.log(this.$refs.targetEl); // 这里会是undefined！
    // 因为Vue更新DOM是异步的，修改isShow后DOM还没来得及更新

    // 解决办法：用$nextTick等待DOM更新完成
    this.$nextTick(() => {
      console.log(this.$refs.targetEl); // 正常获取到DOM元素
    });
  }
}
</script>

如果是v-for的情况，ref会变成一个数组，而不是单个元素，如果你还是像之前一样直接取this.$refs.targetEl就会出错：

<template>
  <div v-for="item in list" :key="item.id" ref="targetEl">{{ item.text }}</div>
  <div>新增的div</div>
</template>

<script>
export default {
  data() {
    return {
      list: [{id:1, text:'测试1'}, {id:2, text:'测试2'}]
    }
  },
  mounted() {
    console.log(this.$refs.targetEl); // 这是一个数组，不是单个DOM元素！
    // 要取单个的话得用索引，比如this.$refs.targetEl[0]
  }
}
</script>

2. ref的绑定位置或拼写错误 #

新增元素的时候，可能不小心把ref的位置移错了，或者拼写了错误的ref名称。比如模板里写的是ref="targetEl"，但mounted里写成了this.$refs.targetEle（多了个e），这种低级错误很容易犯，先仔细核对一下模板和代码里的ref名称是否完全一致。

3. 子组件的异步渲染影响 #

如果新增的元素是一个子组件，而且子组件内部有异步加载数据或者异步渲染的逻辑，那父组件的mounted触发时，子组件可能还没完成渲染，导致父组件通过ref获取子组件的DOM时返回undefined。

这种情况可以：

• 在子组件的mounted钩子中emit一个事件，父组件监听这个事件后再去获取DOM；
• 同样用$nextTick延迟获取，或者watch子组件的某个状态，等状态就绪后再操作。

总结一下排查步骤 #

1. 先检查ref的名称和绑定位置是否正确；
2. 确认带ref的元素是否处于v-if、v-for这类会影响渲染时机的指令下；
3. 尝试用this.$nextTick()包裹你的DOM获取代码，等待Vue完成DOM更新；
4. 如果涉及子组件，检查子组件的渲染是否有异步逻辑。

内容的提问来源于stack exchange，提问作者MilMike