首选要知道this.$refs是干什么的？

ef有三种用法：

1、ref 加在普通元素上，用this.$refs.name 获取到的是dom元素

2、ref 加在子组件上，用this.$refs.name 获取到的是组件实例，可以使用组件的所有方法

3、利用v-for和ref可以获取一组数组或者dom节点

当v-for用于元素或者组件时，引用信息将是包含DOM节点或组件实例数组。

ref本身是作为渲染结果被创建的，在初始渲染的时候你不能访问他们---因为他们还不存在；$refs也不是响应式的，因此不能试图用它在模板中做数据绑定

获取到的总是undefined的

1、 你在哪里调用的，和你调用的对象

试试在 mounted() 里面调用有效果没有；

调用的对象本身就存在的，还是需要数据渲染之后才出现的；同理在 mounted() 里面调用，或者在this.$nextTick( () => { ... } ) 调用

2、调用的对象是否和 v-for 结合使用，或者调用对象是不是数组列表

假如我现在设置 ref 在v-for上，直接获取 this.$refs.name.style，永远都是空的；

因为 this.$refs.name是一个数组，无法通过 .style 获取；

可以动态绑定 ref 和使用 v-for，使用 this.$refs[refName][index] 获取；

3、调用的对象是否和 v-if 结合使用

ref不是响应式的，所有动态加载的模板更新它都无法相应的变化；

解决：更换为 v-show 即可