vue使用this.$refs.xx在mounted中获取DOM元素为undefined

this.$refs.xxx为undefined的几种情况：

1.在created里钩子函数中调用
原因：created()在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。所以this.$refs压根就调不到那个dom,因为页面还没有挂载上去。
2.数据或条件渲染（v-if, v-show）之后的调用
原因：
ref本身作为渲染结果被创建，在初始渲染的时候不能访问他们，是不存在的
$refs不是响应式的，所有的动态加载的模板更新它都无法相应的变化，只在组件渲染完成后才填充。
用于元素或子组件注册引用信息，注册完成，将会注册在父组件$refs对象上

---

原因：
如果在 DOM 结构中的某个 DOM 节点使用了 v-if、v-show 或 v-for（根据后台数据动态操作DOM），那么这些 DOM 在 mounted 阶段是不存在的。

mounted 阶段，一般用于发请求获取数据，配合路由钩子做一些事情。简单来说就是在 mounted 钩子中加载数据而已，加载回来的数据是不会在这个阶段更新到 DOM 中的。所以在 mounted 钩子中使用 $refs，如果 ref 是定位在有 v-if、v-for、v-show 的 DOM 节点中，返回来的只能是 undefined，因为在 mounted 阶段他们根本不存在。

如果说 mounted 阶段是加载阶段，那么 updated 阶段则是完成了数据更新到 DOM 的阶段(对加载回来的数据进行处理)，此时，再使用 this.$refs.xx，就 100% 能找到该 DOM 节点。

updated 与 mounted 不同的是，在每一次的 DOM 结构更新，Vue.js 都会调用一次 updated 钩子函数，而 mounted 钩子函数仅仅只执行一次而已。

---

解决：使用$nextTick

Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。

$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用$nextTick，则可以在回调中获取更新后的 DOM。

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

数据更新后，使用setTimeout也可

setTimeout(() => {
  console.log(this.$refs.***)
}, 0)

---

动态绑定ref并使用v-for，使用this.$refs[refName]无法获取ref

原因：

解决：
将this.$refs[refName]改为this.$refs[refName][0]即可

原文：

1. https://blog.csdn.net/qq_40542728/article/details/89358065?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param
2. https://www.cnblogs.com/layaling/p/11354333.html