Vue.js 是一款非常流行的 JavaScript 框架，被廣泛使用在 Web 開發中。Vue 具有輕量化、易學易用、靈活、高效等多種特性，是當下主流 Web 開發框架之一。

在 Vue 中，ref 是一個非常常見的指令。它用于給 DOM 元素或子組件注冊一個引用，使得我們可以在 Vue 實例中通過 $refs 屬性獲取到它們。

Vue 中，ref 可以指定一個字符串作為它的名稱，也可以指定一個函數。如果指定一個字符串，則該字符串就是 ref 的名稱。我們在 Vue 實例中就可以使用該名稱訪問到它對應的 DOM 元素或組件。

但是有時候，我們并不需要 ref 的名稱在編碼期就確定下來。比如說，我們需要根據某種條件來動態生成一個 ref 名稱，或者是需要基于某個循環變量生成多個 ref 名稱。怎么辦呢？這時候，我們就需要使用 ref 動態名稱了。

ref 動態名稱指的是，將一個 JavaScript 表達式作為 ref 名稱。該表達式的值將在運行時被計算，并作為 ref 名稱。這樣，我們就可以靈活地根據需要動態生成 ref 名稱了。

<template>
<div v-for="(item, index) in list" :key="index">
<input type="text" :ref="`input-${index}`" />
<button @click="handleClick(index)">Submit</button>
</div>
</template>
<script>
export default {
data() {
return {
list: [
{ name: 'Lucy', age: 18 },
{ name: 'Tom', age: 20 }
]
}
},
methods: {
handleClick(index) {
const input = this.$refs[`input-${index}`][0]
console.log(input.value)
}
}
}
</script>

上面的代碼演示了在一個列表中動態生成多個 ref 名稱的情況。在模板中，我們使用 v-for 循環渲染出多個 input 元素，并使用 :ref 指令將每個 input 元素注冊為一個引用。ref 名稱采用了 “input-${index}” 這種形式，其中 ${} 內的是一個表達式，代表了變量 index 的值。因此，對于列表中的每個 input 元素，它們的 ref 名稱都是動態生成的。

在 Vue 實例的方法 handleClick 中，我們可以通過 this.$refs[`input-${index}`][0] 訪問到調用該方法的 input 元素。這樣，我們就可以根據不同的索引值獲取到它對應的 input 元素，實現了動態生成 ref 名稱的目的。

需要注意的是，ref 動態名稱使用了 JavaScript 表達式，因此需要保證表達式的正確性。此外，不應該過度依賴 ref 動態名稱，一般情況下，我們優先使用 Vuex 或 Props / $emit 傳遞數據，而不是通過 $refs 直接獲取到子組件或 DOM 元素的引用。