vue中的ref属性

首先ref的引用是相当于一个DOM节点（如果是子组件则指向的是其实例），而且是一个string类型的值。
通俗的将就类似于原生js用document.getElementById("#id")
但是只是类似，他们的不同点是Vue是操控虚拟DOM ，也就是说在渲染初期并没有这个ref的属性，这个属性是在创建Vue实例以后才被加到虚拟DOM中的。所以在官方文档的最后提醒开发者不能将ref的结果在模版中进行数据绑定。

1 <input ref='text>
  this.$refs.text.value = 'Hello Vue!'

2 <div v-for='(item,key) in buildList' :key="key"  ref="list">
  this.$refs.list[key].style.color = "#5E72E4";

那么刚才代码中的this.$refs是什么呢？
通俗的将就是搜集所有的ref的一个对象。通过this.$refs 可以访问到此vue实例中的所有设置了ref属性的DOM元素，并对其进行操作。

其实组件中的子组件的ref原理也类似，只是指向的不是原组件而是组件的实例。
用法和普通DOM元素一样。