如何理解Vue.js中的ref及$ref，$

1.vue官方文档

首先我们来看一下vue官方是怎么解释的

好了，我知道很多刚接触的vue的小白其实都不太看的懂官方文档在讲什么，下面我用自己的话翻译一下。

2.ref以及$ref

通过 ref 标注 DOM 元素

 // 在 DOM 元素上通过 ref 属性标注，属性名称自定义
<div ref="info">hello</div>

通过 $refs 获取 DOM 元素

// 通过 Vue 实例的 $refs 获取标记 ref 属性的元素
let info = this.$refs.info.innerHTML
console.log(info) // hello

所以说ref和$refs其实就是用来获取/操作DOM元素的，类似于jQuery中的$('.xx')

3.$是什么？

Vue官方文档的解释

看完文档的介绍，里面有这么一句话

除了数据属性，Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来

我的理解是$就是内部函数的一种特殊命名方式，表示这个属性或者方法存在于 Vue 实例的原型上，然后在外部可以使用$去调用

例如：

        var num = {a:1}
        var vm =new Vue({
            el:'#app',
            data:num
        })
        console.log(vm.$data);

使用$data，就可以调用vue实例中data这个属性