Vue動態(tài)設(shè)置ref是一種在組件內(nèi)動態(tài)設(shè)置ref引用的方法。通過設(shè)置ref，我們可以輕松訪問Vue組件中的DOM元素、組件實例或子組件。然而，我們通常會在組件中通過靜態(tài)方式（@ref="xxx"）來分配一個name給ref，以便在組件中獲取到需要引用的DOM節(jié)點。但是，有時候我們需要動態(tài)地創(chuàng)建這個name，比如在循環(huán)組件中。這時候Vue提供了一種動態(tài)設(shè)置ref的方法。

export default { 
name: 'HelloWorld', 
data() { 
return { 
itemCount: 3, 
itemList: [] 
} 
}, 
methods: { 
add() { 
let refName = 'item' + this.itemCount 
// 創(chuàng)建一個新的字段，并且賦值給ref 
this.$refs[refName] = document.createElement('div') 
// 固定延遲300毫秒。這里是為了等待DOM更新 
setTimeout(() =>{ 
this.itemList.push(refName) 
}, 300) 
this.itemCount++ 
} 
} 
}

這是一個組件的樣例，其中包含了一個列表展示。我們可以動態(tài)添加一些項目到列表當(dāng)中。每個項目都會自動分配一個新的ref name，在列表up的時候，這些name將會被添加到`refs`對象中，通過`refs`對象可輕松找到對應(yīng)的DOM實例

<template> 
<div> 
<div>count：{{itemCount}}</div> 
<button @click="add">Add</button> 
<br> 
<div v-for="(item, index) in itemList" :key="index"> 
<div :ref="item">{{index}}</div> 
</div> 
</div> 
</template>

上面代碼是我們的模板，列表以`v-for`方式展示。通過數(shù)組`itemList`來維護(hù)DOM元素的動態(tài)添加，在每一個元素都被添加完成后，`itemList`也會一個個顯示出來

以上這個組件在計數(shù)`itemCount`中有一個動態(tài)數(shù)組初始長度。`add`方法動態(tài)創(chuàng)建div，創(chuàng)建一個新的ref name，并且賦值給ref，隨后固定延遲300毫秒。這里是為了等待DOM更新。在延遲過后，`itemList`數(shù)組會新增插入一項`refName`，這時候的`refName`是和對應(yīng)的DOM節(jié)點一一對應(yīng)的。剩下的特別之處就是在模板中指定了這個ref的名字。這樣我們就能在其他方法中訪問這個DOM節(jié)點。所以說這樣實現(xiàn)的效果是可以動態(tài)的為每一個元素添加單獨的ref name，從而能夠在組件內(nèi)再通過ref name名稱獲取到相應(yīng)的DOM節(jié)點。