Vue?3.0?v-for中的Ref數(shù)組用法小結(jié)
更新時(shí)間：2023年12月08日 11:37:19 作者：鋜斗
在?Vue?2?中,在?v-for?里使用的?ref?attribute會(huì)用ref?數(shù)組填充相應(yīng)的?$refs?property,本文給大家介紹Vue?3.0?v-for中的Ref數(shù)組的相關(guān)知識(shí),感興趣的朋友一起看看吧
介紹
在 Vue 2 中，在 v-for 里使用的 ref attribute 會(huì)用 ref 數(shù)組填充相應(yīng)的 $refs property。當(dāng)存在嵌套的v-for時(shí)，這種行為會(huì)變得不明確且效率低下。
在 Vue 3 中，這樣的用法將不再在 $ref 中自動(dòng)創(chuàng)建數(shù)組。要從單個(gè)綁定獲取多個(gè) ref，請(qǐng)將 ref 綁定到一個(gè)更靈活的函數(shù)上 (這是一個(gè)新特性)：
<div v-for="item in list" :ref="setItemRef"></div>
結(jié)合選項(xiàng)式 API:
export default {
data() {
return {
itemRefs: []
}
},
methods: {
setItemRef(el) {
this.itemRefs.push(el)
}
},
beforeUpdate() {
this.itemRefs = []
},
updated() {
console.log(this.itemRefs)
}
}結(jié)合組合式 API:
import { ref, onBeforeUpdate, onUpdated } from 'vue'
export default {
setup() {
let itemRefs = []
const setItemRef = el => {
itemRefs.push(el)
}
onBeforeUpdate(() => {
itemRefs = []
})
onUpdated(() => {
console.log(itemRefs)
})
return {
itemRefs,
setItemRef
}
}
}注意：
- itemRefs 不必是數(shù)組：它也可以是一個(gè)對(duì)象，其 ref 會(huì)通過(guò)迭代的 key 被設(shè)置。
- 如果需要，itemRef 也可以是響應(yīng)式的且可以被監(jiān)聽。
到此這篇關(guān)于Vue 3.0 v-for中的Ref數(shù)組的文章就介紹到這了,更多相關(guān)Vue 3.0 v-for Ref數(shù)組內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
文章詳細(xì)分析了Vue項(xiàng)目中靜態(tài)資源路徑失效的問(wèn)題,包括開發(fā)、構(gòu)建、部署等階段的常見原因,并提供了多種解決方案,旨在幫助開發(fā)者系統(tǒng)性地解決靜態(tài)資源路徑問(wèn)題,構(gòu)建穩(wěn)定可靠的前端應(yīng)用,需要的朋友可以參考下2025-03-03
vue動(dòng)態(tài)繪制四分之三圓環(huán)圖效果
這篇文章主要介紹了vue動(dòng)態(tài)繪制四分之三圓環(huán)圖效果，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09
vue-cli 自定義指令directive 添加驗(yàn)證滑塊示例
本篇文章主要介紹了vue-cli 自定義指令directive 添加驗(yàn)證滑塊示例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
vue如何實(shí)現(xiàn)點(diǎn)擊空白區(qū)域關(guān)閉彈窗
這篇文章主要介紹了vue如何實(shí)現(xiàn)點(diǎn)擊空白區(qū)域關(guān)閉彈窗問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04
vue-pdf打包后無(wú)法預(yù)覽問(wèn)題及修復(fù)方式
這篇文章主要介紹了vue-pdf打包后無(wú)法預(yù)覽問(wèn)題及修復(fù)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue 如何處理防止按鈕重復(fù)點(diǎn)擊問(wèn)題
這篇文章主要介紹了vue 如何處理防止按鈕重復(fù)點(diǎn)擊問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue?Router修改query參數(shù)url參數(shù)沒有變化問(wèn)題及解決
這篇文章主要介紹了Vue?Router修改query參數(shù)url參數(shù)沒有變化問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue3中解決組件間css層級(jí)問(wèn)題的最佳實(shí)踐
<Teleport> 是 Vue 3 中引入的一個(gè)內(nèi)置組件,用于將組件的內(nèi)容渲染到 DOM 中的指定位置,而不受組件層級(jí)結(jié)構(gòu)的限制,本文給大家介紹了Vue3使用Teleport解決組件間css層級(jí)問(wèn)題的最佳實(shí)踐,需要的朋友可以參考下2025-02-02
vue中defineProperty和Proxy的區(qū)別詳解
這篇文章主要介紹了vue中defineProperty和Proxy的區(qū)別詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
編譯優(yōu)化指的是編譯器將模板編譯為渲染函數(shù)的過(guò)程中，盡可能多的提取關(guān)鍵信息，并以此指導(dǎo)生成最優(yōu)代碼的過(guò)程，優(yōu)化的方向主要是區(qū)分動(dòng)態(tài)內(nèi)容和靜態(tài)內(nèi)容，并針對(duì)不同的內(nèi)容采用不同的優(yōu)化策略2023-01-01