vue的ref作为绑定元素的时候使用，为啥输出的是一个数组？

Question

HTML代码：

<ul class="list">

  <li class="item" 
  v-for='item of letters' 
  :key='item'
  :ref='item'
  @click='handleClick'
  @touchstart='handleTouchStart'
  @touchmove='handleTouchMove'
  @touchend='handleTouchEnd'
  >{{item}}</li>
</ul>

逻辑代码：
handleTouchMove(){

  console.log('handleTouchMove');
  if (this.touchStatus) {
      const startY = this.$refs.A[0].offsetTop
      console.log(this.$refs.A); =====>这个打印出数组来了,为什么？
      console.log(startY);
  }
},

数据项：letters =[A,B,C,D,E,F,G,H,I,.....,X,Y,Z]

请问各位大佬，这里的ref是通过数据绑定的形式使用的时候，为啥 this.$refs.A打印出来的是一个数组？

Answer 1

这个测试了下，还真奇特
https://cn.vuejs.org/v2/api/#ref 官方的建议貌似不允许ref用数据绑定

我看了下源码 跟这个函数里registerRef()、processRef、checkInFor以及refInFor有关
当ref的元素el本身或者 parent有列表渲染时v-for ,会将refInFor设置成true
然后ref.key在registerRef函数就被设置成了数组

Answer 2

这是 vue 的特性, 自动把 v-for 里面的 ref 展开成数组的形式. 假设你的 ref 不是动态的, 而是静态的 ref="a", 那么不管你执行多少次循环, 最后 ref 只会有一个值, 所以 vue 为了处理这种情况会把 v-for 里 ref 转为 数组形式, 为了能捕捉所有的 ref 值.