Vue中的ref是一個非常方便且實用的特性，它可以用來獲取頁面上的DOM元素、組件實例等等。在Vue中使用ref非常簡單，只需要在需要獲取引用的元素上添加ref屬性即可。 在Vue中獲取ref可以使用this.$refs來訪問，this代表的是Vue實例，而$refs是Vue實例所有ref屬性的集合，它是一個普通的JavaScript對象。通過$refs我們可以獲取到DOM元素的屬性、方法等等，甚至直接調用組件中定義的方法。 使用ref的一個常見的場景是獲取表單輸入框中的值。比如我們需要獲取一個輸入框的值并在頁面上進行操作，那么就可以在該輸入框上添加ref屬性，然后使用$refs來訪問它。假設我們有以下代碼：

<input type="text" ref="inputValue">

那么我們就可以在Vue中這樣來訪問它：

let value = this.$refs.inputValue.value;

這樣我們就可以獲取到輸入框中的值了。如果我們需要對獲取到的值進行一些操作，比如復制到剪貼板中，可以直接調用DOM元素上的方法，比如select()、copy()等等。 除了獲取DOM元素的屬性和方法，ref還可以獲取組件實例。比如我們有一個組件：

<template>
<div>
<span>{{ message }}</span>
</div>
</template>
<script>
export default {
...
data() {
return {
message: 'Hello, Vue!'
}
},
...
}
</script>

如果我們需要在另一個組件中調用上述組件中的方法或者修改其中的數據，那么可以在上述組件上添加ref，然后在父組件中使用this.$refs來訪問該組件實例：

<template>
<div>
<my-component ref="myComponentRef"></my-component>
</div>
</template>
<script>
export default {
mounted() {
let myComponent = this.$refs.myComponentRef;
myComponent.message = 'Hi, Vue!';
}
}
</script>

通過ref我們可以非常方便地獲取DOM元素、組件實例等等，并對它們進行操作。在實際開發中，ref是一個非常實用的特性，可以大大提高開發效率。