出现$refs.xxxRef未定义的原因及解决

在项目中需要使用到表单验证，但是使用$refs.xxxRef一直报undefined错误，

 

打印$refs发现根本没有我想要的引用，而我又确保已经在表单上加了ref="xxxRef"，那么问题出在哪里了呢？？

查阅发现是我是用了v-show/v-if控制表单的显隐，ref是作为渲染结果被创建的，页面刚开始加载的时候该组件还没有被渲染出来，因此访问不到，而且$ref不是响应式的。

所以在使用他之前，需保证对应组件已经渲染成功。那么可以使用延时加载或者$nextTick，代码如下

另外一个有经验的大佬还告诉我他的经验：通过数据劫持让他变成响应式，此操作我还没有试，以后可以试试哦