关于vue2的Ref的特点

• 先看一下官方的解释
• 从上面我们可以知道$refs会返回dom或者组件实例或者包含前两者的数组，但是有个问题就是一个组件页面里有多个同名的ref，Vue会怎么处理呢？

这里我要分出两种情况

非v-for渲染的普通元素或组件

• 不是v-for渲染出来的同名ref,结论是 以dom结构为主先是从上到下，然后是从里层到外层找到最后一个对应名称的ref，如果是原生dom返回dom元素本身，如果是组件返回组件实例。看下面的例子。

template

result

• 最后发现是拿到了<HelloWorld>组件的实例，如果删除 <HelloWorld> 上的ref 就会拿到 它的里层的 ref="one" 的 div 因为它是最下面的同名ref，这里有个注意的地方就是插槽必须生效才能拿到插槽中的元素或组件，不然会拿到外层的<HelloWorld>组件。

v-for渲染的普通元素或组件

• 第二种情况就是使用v-for渲染了多个同名ref的元素，首先我们要把v-for看做一个整体，他同样会遵循第一条的规则，比如在v-for的元素同级下面存在一个同名ref标签或者组件，$refs就会拿到下面的dom或者组件实例，如果返过来就是拿到v-for的元素数组。
• 然后我们看只有v-for的情况，上面说到数组，当我们用 ref 去取 v-for 中的元素的时候返回的是数组不管里面是不是有没有多个同名ref元素，看下图。

template

result

• 当v-for中没有重名ref时会返回只有一条数据的数组，所以只要获取v-for中的ref就必然会拿到一个数组，所以在处理数据的时候要注意。看下图，我们使用index动态渲染ref保证了ref的唯一。

template

result

• 接下来讨论一下v-for ref获取的元素的顺序问题，我们来看出现多层级同名ref的情况，简单来说 从里到外，从上到下。看下图。

template

result

• 再来看看v-for 包含组件的时候是否有什么区别，看下图。

template

result

• 可以看到也是遵循上述规则的。