vue里面的ref详解

在以前的js中我们都是通过设置id，然后通过document.getelementbyid(hello) 来获取dom树进行操作，方便快捷。
但是在vue框架里面，我们都是通过ref设置来获取参数的，这个东西有一个 好处，对于普通的元素比如button而言，他就是一个跟js一样的dom树获取，但是对于组件而言，就可以获取整个组件对象（VC），我们可以通过这种方式获取组件里面的内容进行操作

我们用代码演示
设立了两个ref获取的元素，一个是原生的button一个是组件

<button  @click="showDom">点击输出dom元素</button>
 <HelloWorld ref="hello"></HelloWorld>
 <button ref="btn">btn获取按钮dom树</button>

点击按钮，分别输出这两个东西（this.$refs.hello指的是在vue下面的hello组件）

showDom(){
          console.log(this.$refs.hello);
          console.log(this.$refs.btn)
      }

观察输出我们可以轻易的得出结论，
对于组件而言，输出的是组件的实例对象，我们可以轻易的在这里获取到组件的内容
对于原生节点来说，这个跟document.getelementbyid() 一样的作用