共计 1427 个字符，预计需要花费 4 分钟才能阅读完成。
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] 即可
原文：
- 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
- https://www.cnblogs.com/layaling/p/11354333.html