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中非常方便的一个特性，能够在一些场景下提高开发效率。