12-Vue指令之v-ref

组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）

只有当它插入文档后，才会变成真实的 DOM

Vue 中所有的 DOM 变动都现在虚拟 DOM 上发生，然后在将实际变动发生的部分，反映在真实的 DOM 中，这种算法叫 DOM diff 可以极大的提高网页的性能

但是，有时需要从组建获取真实的 DOM 节点，这时就要用到 ref 属性

render: function() {
return (
<div>
<input type="text" ref="refName" />
</div>
);
}

在上面的代码中，input 作为组件的一个子节点，用于获取用户的输入。这时就必须获取真实的 DOM 节点，虚拟 DOM 节点是拿不到用户输入的数据的。

为了做到这一点，文本框必须有一个 ref 属性，然后 this.refName 就会返回真实的 DOM 节点

需要注意的是，由于 this.refName 属性获取的真实的 DOM 节点，所以必须等到虚拟 DOM 插入文档以后，才能使用这个属性，否则会报错。

因此，最好为组件指定一个事件回调函数，确保只有等到真实 DOM 发生 click 事件之后，才会读取 this.refName 属性

在父组件上注册一个子组件的索引，便于直接访问。不需要表达式。必须提供参数 id ，可以通过父组件的 $ref 对象访问子组件

当 v-ref 和 v-for 一起使用时，注册的值僵尸一个数组，包含所有的子组件，对应于绑定数组，如果 v-for 使用在一个对象上，注册的值将是一个对象，它包含所有的子组件，对应于绑定对象