js对象属性 通过点(.) 和 方括号([]) 的不同之处

关于这个问题，是我在做vue项目时的一个需求，让我对JS的.和[]的区别产生了兴趣。

---

我需要点击一个自定义的icon唤醒element UI的时间日期选择器的picker（也就是那个选择器），于是在vue中，给每个不同的时间选择器组件定义自己的ref。并写了一个函数来操作它们。

在Vue的模板中，我们可以在模板中的任何元素中添加ref属性，这样就可以在Vue实例中引用这些元素。

<el-date-picker ref="deadLine"></el-date-picker>
<img src="xxx.jpg" @click="openTimePad('deadLine')">

openTimePad（ref）{
 this.$refs.ref.pickerVisible = true
}
// pickerVisible是element UI时间日期选择组件的属性，控制picker的显示。

然而这样写之后会报错，pickerVisible of undefined，也就是我们根本就没有拿到这个ref应用的这个DOM,于是换一个写法。

openTimePad（ref）{
 this.$refs[ref].pickerVisible = true
}

这样就起作用了。

---

在JS中.和[]都是访问对象的属性，对象属性以字符串形式保存，在[]中填的是字符串，字符串是js的数据类型，js可以改变它，于是动态的属性，都需要通过[]来访问。