vue之ref

　　今天，遇到了一个vue的'refs'的使用，由于基础不扎实，竟然忘了如何使用这个元素。所以认真的了解其使用方法，以免日后再次忘记。

　　首先，ref 与 $refs 一起对应使用的。ref像是一个个的带标记的锁的房屋，而$refs则是可以查找到锁并可以打开锁的使用房屋的钥匙。

在vue中，ref则用于对元素或者子组件进行注册引用信息，则在父组件的$refs上则有了ref的引用信息。如果实在普通的DOM元素上使用，引用指向

的就是DOM元素；如果是在子组件上，引用就指向组件的实例，这样父元素就可以使用组件的所有方法，可以用 this.$refs.(ref值).方法名()调用子组件的方法。

　　注意点：1、如果想通过-v-for遍历不同的ref时记得加 ：号，即 : ref = 变量，这和其他vue属性相同，不加冒号的代表的是一个常量，加冒号的代表的是一个变量或者表达式；

　　　　　　2、如果：ref= 某变量 即ref添加了：，获取该ref元素或者组件是需要加上[0],即 this.$refs[refsItem][0];

　　　　　　3、ref需要在dom渲染之后才会存在，在使用的时候要确保dom已经渲染完成，比如在生命周期mounted(){}钩子中调用，或者在 this.$nextTick()=>{}中调用；

　　　　　　　　（补充一下 this.nextTick(callback）是数据发生变化，更新后执行回调； this.$nextTick(callback),当dom发生变化，更新后执行的回调）

　　              补充几个当获取this.$refs属性时，出现undefined的情况：

　　　　　　1、在钩子函数created中调用

　　　　　　　　原因：created()在实例创建完成后被立即调用，这一步，实例完成以下的配置: 数据观测（dataobserver），属性和方法的运算，watch/event时间的回调。但是

　　　　　　挂载阶段还没有开始，所以this.$refs无法调到那个dom。

　　　　　　　　解决：在mounted()钩子函数中调用。

　　　　　　2、数据或者条件渲染（v-if,v-for）之后的调用

　　　　　　　　原因：ref 本身是作为渲染结果被创建的，在初始渲染的时候不能访问他们，是不存在。$refs不是响应式的，只在组件渲染完成后才填充。ref不是响应式的，所有的

　　　　　　动态模板加载都无法相应的变化。