Vue中的ref是一个用于给DOM元素或组件注册引用的特殊属性。它可以让我们在JavaScript中通过this.$refs来访问到对应的DOM元素或组件实例，从而方便地操作它们。
在Vue中使用ref的方式有两种：在普通DOM元素上使用ref和在子组件上使用ref。
1. 在普通DOM元素上使用ref:
在模板中，我们可以像下面这样给DOM元素添加ref属性：
```html
```
在JavaScript代码中，我们可以通过this.$refs.myDiv来获取到这个DOM元素：
```javascript
mounted() {
console.log(this.$refs.myDiv)
}
```
这样我们就可以在mounted钩子中获取到对应的DOM元素，并对它进行操作。
2. 在子组件上使用ref:
在父组件的模板中，我们可以像下面这样给子组件添加ref属性：
```html
```
在父组件的JavaScript代码中，我们可以通过this.$refs.myComponent来获取到子组件的实例：
```javascript
mounted() {
console.log(this.$refs.myComponent)
}
```
这样我们就可以在父组件中访问到子组件的实例，从而调用子组件中的方法或访问子组件中的数据。
除了在mounted钩子中使用this.$refs来获取元素或组件的引用，我们还可以在其他生命周期钩子函数、方法或计算属性中使用this.$refs来访问到对应的元素或组件。
使用ref的一些注意事项：
- 只有在组件渲染完成之后，才能访问到this.$refs中的引用。因此，在组件中使用this.$nextTick来保证在DOM更新之后再访问引用。
- 如果在v-for循环中使用ref，那么$refs会变成一个包含所有循环中元素引用的对象。
- 在Vue 2.0中，$refs并不是响应式的。也就是说，当组件的引用发生变化时，$refs并不会自动更新。
- ref属性可以用来引用任何类型的DOM元素或组件，不仅仅局限于普通的HTML标签。
总结一下，ref属性在Vue中是用来注册引用的，它可以用于获取DOM元素或组件实例的引用，从而便于我们在JavaScript中操作它们。无论是在普通DOM元素上还是在子组件上使用ref，都可以通过this.$refs来访问到对应的引用。在使用ref时需要注意的是，在组件渲染完成之后才能访问到引用，并且$refs并不是响应式的。ref是Vue中非常方便的一个特性，能够在一些场景下提高开发效率。
QQ客服