vue单页面开发-坑位：$refs有时获取不到，出现报错！

背景原因

最近vue开发新项目，做了一个登录失效的功能，然后这个功能却经常出现前端报错的现象，导致代码无法运行，退不出去的问题。究其原因，我在 vue 项目中，想要通过$refs来获取元素，然而有时候会出现获取不到的BUG,查询资料了解到是dom节点，异步加载机制导致的。

解决档案

1. this.$nextTick

由于$refs不是响应式的，所以我们需要$nextTick来进行异步。

2.有时候 即使加上了，还是报错。原因是： v-for 循环 得到的不止一个

这是就需要我们去看一下节点内容了this.$refs[refName][0]，因为这时我们输入一个节点名称，获取到的是一个数组，取我们需要的即可

3. v-if

有时由于我们使用了v-if，导致节点直接不存在，也获取不到，这时的解决方案就是，替换为v-show对组件进行隐藏