this.$refs['index-item-title-' + key][0];这种$refs后面跟着方括号是什么用法

Question

https://github.com/alibaba/we... 中的第180行

const keyEl = this.$refs['index-item-title-' + key][0];

method调用这个refs[][]，平时没见过,问下各位大佬这种$refs后面跟着方括号方括号是什么用法?
一般怎么用，方括号里面是什么意思或者给个电梯，或者文档什么的。
我看官方api或者百度找到的里面用refs都是this.$refs.xxx.xxx

代码是VUE.js写的，github那个是weex-ui

Answer 1

refs引用
比如

<form  ref="formName">

this.$refs['formName']或者this.$refs.formName就能取到这个form

this.$refs['index-item-title-' + key][0];是因为这个ref需要拼接。
对象属性是变量的时候用方括号[]拼接
比如

var a='name';
obj.a = 'zhangsan'//错误
obj[a]='zhangsan'//正确

Answer 2

补充楼上：
1、这两种写法是完全相等的 ：

this.$refs.form1 === this.$refs['form1']   //true

所有的object属性都有这两种取法，比如：

var obj = {name:"张三"};
obj.name === obj['name'];

2、第一个中括号 ['index-item-title-' + key] 就相当于this.$refs['form1']这种写法，只不过ref的值不是一个纯字符串，而是一个由变量 key和字符串'index-item-title-'组成的字符串

3、第二个中括号[0]是因为这个ref的元素使用了for循环，详见vue官网

意思是如果你只是普通写一个组件（代码如下）：则this.$refs['index-item-title-' + key]就直接获取到组件实例对象

<cell :ref="'index-item-title-' + key">
data(){
    return:{
        key:'1'
    }
}

但如果你这里使用循环（代码如下）：则this.$refs['index-item-title-' + key]只是获取到一个数组，这个数组的第一个元素才是这个组件实例对象，而一个数组的第一个元素自然是用arr[0]这样获取

<cell v-for="(v,i) in formatList"
            :key="i"
            :ref="'index-item-title-' + v.title">