Vue的ref是Vue.js的一個非常有用的指令，它可以用來從模板中捕獲一個元素的引用，在JavaScript中使用這個引用來訪問元素和其相關信息。

ref指令可以用在DOM元素或子組件上，并且它也可以接收一個函數作為參數。當ref被用在DOM元素上時，Vue會注冊一個對應的元素引用， 并且這個引用會被注入到父組件使用的vue實例中，所以我們可以通過實例來訪問這個元素。

<template>
<input ref="inputRef" v-model="inputValue">
</template>
<script>
export default {
data() {
return {
inputValue: ''
}
},
mounted() {
this.$refs.inputRef.focus();
}
}
</script>

在上面的例子中，我們通過ref指令設置了一個inputRef引用，在mounted生命周期鉤子函數中，我們可以使用this.$refs.inputRef來訪問這個引用，并給這個元素設置了焦點。

當ref被用在子組件上時，就會獲取到子組件實例的引用，這允許我們在父組件中直接訪問子組件的屬性和方法，這在需要修改子組件狀態時非常有用。

<template>
<div>
<child ref="childComp"></child>
<button @click="changeChildState">修改子組件狀態</button>
</div>
</template>
<script>
import Child from './Child.vue';
export default {
components: {
Child
},
methods: {
changeChildState() {
this.$refs.childComp.changeState();
}
}
}
</script>

在上面的例子中，我們定義了一個Child組件，并在父組件中使用了這個組件，并通過ref指令設置了一個childComp引用，在父組件的方法中，我們可以通過this.$refs.childComp來訪問子組件，并調用它的changeState方法來修改它的狀態。