通过this.$refs.name来获取会报错name is undefined

报错原因 ：
1，必须要等页面中的ref子组件加载完毕，才可以获取到
2，在生命周期mounted之前的钩子函数中去调用会获取不到，原因是DOM节点都没有生成。
3, this.refs的组件在v-if为false的父节点下，导致这个子组件未渲染，所以获取不到。

特殊情况 ：调用对象是不是数组列表
设置ref在v-for列表上时，直接获取this.$refs.name.style，永远是空的
this.$refs.name是一个数组，无法通过 .style 获取样式
只能遍历这个this.$refs.name数组，在this.$refs.name[index]上设置样式

总结 : 一定是组件已经渲染成功才能调用组件的数据。而不是页面加载完成后就一定能获取到
ref本身是作为渲染结果被创建的，在渲染的时候是不能访问的，$refs不是响应式的，只在组件渲染完成后才填充

一个比较常见的场景：在一个弹窗打开的时候立刻通过this.$refs.dialog来获取内容就会出现dialog is undefined的错误

<div v-if="flag">
      <el-dialog ref="dialog"></el-dialog>
<div>

在调用前检查flag是否是false,如果是赋值为true(数组改变要获取dom要用$nextTick)

this.flag = true
this.$nextTick(() => {
  console(this.$refs.dialog)
})